/* ============================================================
   每晚学习计划 - 可爱MBE风格样式
   ============================================================ */

/* 全局变量 */
:root {
    --primary: #FF9F43;
    --secondary: #54A0FF;
    --accent: #FF6B6B;
    --success: #1DD1A1;
    --warning: #FECA57;
    --purple: #A29BFE;
    --bg: #FFF9F0;
    --bg-card: #FFFFFF;
    --text: #2D3436;
    --text-light: #636E72;
    --text-lighter: #B2BEC3;
    --border: #F0E6D6;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.15);
    --radius: 20px;
    --radius-sm: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   背景装饰动画
   ============================================================ */
.bg-decor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    font-size: 24px;
    animation: twinkle 3s ease-in-out infinite;
}

.star-1 { top: 10%; left: 5%; animation-delay: 0s; }
.star-2 { top: 20%; right: 8%; animation-delay: 0.5s; font-size: 30px; }
.star-3 { top: 60%; left: 3%; animation-delay: 1s; }
.star-4 { top: 75%; right: 5%; animation-delay: 1.5s; font-size: 20px; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
}

.cloud {
    position: absolute;
    font-size: 48px;
    animation: float 8s ease-in-out infinite;
    opacity: 0.6;
}

.cloud-1 { top: 15%; left: -5%; animation-delay: 0s; }
.cloud-2 { top: 40%; right: -5%; animation-delay: 2s; font-size: 36px; }

@keyframes float {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(20px) translateY(-10px); }
    50% { transform: translateX(40px) translateY(0); }
    75% { transform: translateX(20px) translateY(10px); }
}

/* ============================================================
   动画通用
   ============================================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ============================================================
   首页样式
   ============================================================ */
.home-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
}

.home-header {
    text-align: center;
    margin-bottom: 50px;
}

.home-title-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.home-title {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.home-subtitle {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.home-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--warning);
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(254, 202, 87, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 孩子卡片 */
.child-cards {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}

.child-card {
    position: relative;
    width: 380px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 3px solid transparent;
}

.child-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

.card-meimei:hover {
    border-color: #FF6B9D;
}

.card-gege:hover {
    border-color: #4ECDC4;
}

.child-card-bg {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0.1;
    transition: all 0.3s;
}

.card-meimei .child-card-bg {
    background: #FF6B9D;
}

.card-gege .child-card-bg {
    background: #4ECDC4;
}

.child-card:hover .child-card-bg {
    transform: scale(2);
    opacity: 0.15;
}

.child-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.child-card:hover .child-avatar {
    transform: rotate(10deg) scale(1.1);
}

.child-avatar-icon {
    font-size: 40px;
}

.child-info {
    position: relative;
    z-index: 1;
}

.child-name {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
}

.child-nickname {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.child-goal {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    padding-top: 12px;
    border-top: 2px dashed var(--border);
}

.child-card-arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s;
    color: var(--text-light);
}

.child-card:hover .child-card-arrow {
    background: var(--primary);
    color: white;
    transform: translateX(5px);
}

.child-card-sparkle {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s;
}

.child-card:hover .child-card-sparkle {
    opacity: 1;
    animation: twinkle 1s ease-in-out infinite;
}

.home-footer {
    text-align: center;
    color: var(--text-light);
    font-size: 16px;
}

/* ============================================================
   学习计划页样式
   ============================================================ */
.child-page {
    padding-bottom: 60px;
}

.child-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--theme-color, var(--primary));
    z-index: 100;
}

/* 顶部导航 */
.top-nav {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 50;
}

.nav-back {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.2s;
}

.nav-back:hover {
    background: var(--theme-light, var(--bg));
    color: var(--theme-color, var(--primary));
}

.back-arrow {
    font-size: 18px;
    font-weight: bold;
}

.nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
}

.nav-icon {
    font-size: 24px;
}

.nav-week-badge {
    background: var(--theme-color, var(--primary));
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.child-container {
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

/* 孩子信息卡 */
.child-info-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    border-left: 6px solid var(--theme-color, var(--primary));
}

.info-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.info-text {
    flex: 1;
}

.info-text h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.info-nickname {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 400;
}

.info-grade {
    font-size: 14px;
    color: var(--text-light);
}

.info-stats {
    display: flex;
    gap: 30px;
}

.stat-item {
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--theme-color, var(--primary));
}

.stat-label {
    font-size: 12px;
    color: var(--text-light);
}

/* 区块通用 */
.section {
    margin-bottom: 30px;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-icon {
    font-size: 24px;
}

/* 学习流程时间轴 */
.flow-timeline {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    overflow-x: auto;
}

.flow-item {
    flex: 1;
    min-width: 180px;
    text-align: center;
    position: relative;
    padding: 0 10px;
}

.flow-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--theme-light, var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 12px;
    transition: transform 0.3s;
}

.flow-item:hover .flow-icon {
    transform: scale(1.15) rotate(5deg);
}

.flow-time {
    font-size: 12px;
    color: var(--theme-color, var(--primary));
    font-weight: 600;
    margin-bottom: 4px;
}

.flow-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.flow-desc {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}

.flow-connector {
    position: absolute;
    top: 28px;
    right: -10px;
    width: 20px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
}

.flow-connector::after {
    content: '→';
    position: absolute;
    right: -8px;
    top: -10px;
    font-size: 14px;
    color: var(--text-lighter);
}

/* 周次切换 */
.week-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.week-tab {
    flex: 1;
    min-width: 140px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.week-tab:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.week-tab.active {
    border-color: var(--theme-color, var(--primary));
    background: var(--theme-light, var(--bg));
}

.week-num {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-color, var(--primary));
    margin-bottom: 4px;
}

.week-theme {
    display: block;
    font-size: 12px;
    color: var(--text-light);
}

/* 本周主题横幅 */
.week-theme-banner {
    background: var(--theme-color, var(--primary));
    border-radius: var(--radius);
    padding: 24px 30px;
    margin-bottom: 30px;
    color: white;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* 今日课件入口 */
.courseware-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    border-radius: 16px;
    padding: 18px 24px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255,159,67,0.15);
    border: 2px solid #FFE0B2;
    transition: all 0.3s;
    margin-bottom: 24px;
}
.courseware-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255,159,67,0.25);
    border-color: #FF9F43;
}
.courseware-entry-icon {
    font-size: 40px;
    animation: bounce 1.5s infinite;
}
.courseware-entry-text { flex: 1; }
.courseware-entry-title {
    font-size: 18px;
    font-weight: 700;
    color: #FF9F43;
    margin-bottom: 2px;
}
.courseware-entry-desc {
    font-size: 13px;
    color: #999;
}
.courseware-entry-arrow {
    font-size: 24px;
    color: #FF9F43;
    transition: transform 0.3s;
}
.courseware-entry:hover .courseware-entry-arrow {
    transform: translateX(5px);
}

/* 每日课件按钮 */
.day-courseware-btn {
    display: flex;
    align-items: center;
}
.courseware-day-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FECA57, #FF9F43);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(255,159,67,0.3);
    transition: all 0.3s;
    white-space: nowrap;
}
.courseware-day-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 16px rgba(255,159,67,0.4);
}
.courseware-day-btn.disabled {
    background: #e0e0e0;
    color: #999;
    box-shadow: none;
    cursor: not-allowed;
}
.courseware-day-btn.disabled:hover {
    transform: none;
}

.week-theme-banner::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.week-theme-banner::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: 60px;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

.theme-label {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.theme-text {
    font-size: 24px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.theme-words {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.words-label {
    font-size: 13px;
    opacity: 0.9;
}

.word-chip {
    background: rgba(255,255,255,0.25);
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
}

/* 星期导航 */
.day-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.day-tab {
    flex: 1;
    min-width: 90px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.day-tab:hover {
    transform: translateY(-2px);
}

.day-tab.active {
    border-color: var(--theme-color, var(--primary));
    background: var(--theme-light, var(--bg));
    transform: translateY(-2px);
}

.day-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.day-tab.active .day-name {
    color: var(--theme-color, var(--primary));
}

.day-type {
    display: block;
    font-size: 11px;
    color: var(--text-light);
}

/* 每日内容 */
.day-content-wrapper {
    position: relative;
    min-height: 400px;
}

.day-content {
    display: none;
}

.day-content.active {
    display: block;
    animation: slideIn 0.4s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.day-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.day-card-header {
    background: var(--theme-light, var(--bg));
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.day-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.day-card-day {
    font-size: 24px;
    font-weight: 800;
    color: var(--theme-color, var(--primary));
}

.day-card-type {
    color: white;
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
}

.day-card-icon {
    font-size: 36px;
    animation: bounce 2s ease-in-out infinite;
}

.day-card-body {
    padding: 24px 30px;
}

/* 内容网格 */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.content-block {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
    border-left: 4px solid var(--theme-color, var(--primary));
    transition: all 0.3s;
}

.content-block:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.content-grid .content-block {
    margin-bottom: 0;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.block-icon {
    font-size: 20px;
}

.block-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-color, var(--primary));
}

.block-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
}

.express-content {
    font-size: 16px;
    line-height: 1.8;
}

.tip-block {
    background: #FFF8E1;
    border-left-color: var(--warning);
}

.tip-block .block-title {
    color: #F39C12;
}

.tip-content {
    font-size: 14px;
    color: #7D6608;
    font-style: italic;
}

/* 卡片底部 */
.day-card-footer {
    padding: 16px 30px;
    border-top: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.progress-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s;
}

.dot.done {
    background: var(--success);
}

.dot.current {
    background: var(--theme-color, var(--primary));
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--theme-color, var(--primary));
}

.day-nav-buttons {
    display: flex;
    gap: 10px;
}

.day-nav-btn {
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    background: var(--bg);
    color: var(--text-light);
}

.day-nav-btn:hover {
    background: var(--theme-color, var(--primary));
    color: white;
}

/* 底部 */
.child-footer {
    text-align: center;
    margin-top: 40px;
    color: var(--text-light);
    font-size: 16px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
    .home-title {
        font-size: 32px;
    }

    .child-card {
        width: 100%;
        max-width: 380px;
    }

    .top-nav {
        padding: 10px 15px;
    }

    .nav-title {
        font-size: 14px;
    }

    .nav-week-badge {
        padding: 6px 12px;
        font-size: 12px;
    }

    .child-info-card {
        flex-wrap: wrap;
    }

    .info-stats {
        width: 100%;
        justify-content: center;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .flow-timeline {
        flex-direction: column;
    }

    .flow-connector {
        display: none;
    }

    .day-card-footer {
        flex-direction: column;
        gap: 12px;
    }
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--text-lighter);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ============================================================
   学习页面通用样式
   ============================================================ */
.learn-page {
    background: linear-gradient(180deg, var(--theme-light) 0%, #fff 100%);
    min-height: 100vh;
    padding-bottom: 40px;
}

.learn-container {
    max-width: 900px;
    padding-top: 20px;
}

/* 顶部导航 */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-back {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--theme-color);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--theme-light);
    transition: all 0.3s;
}
.nav-back:hover {
    transform: translateX(-3px);
    background: var(--theme-color);
    color: #fff;
}
.back-arrow { font-size: 16px; }

.nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-color);
}
.nav-icon { font-size: 22px; }

.star-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #FECA57, #FF9F43);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(255,159,67,0.3);
}
.star-badge:hover { transform: scale(1.05); }

/* 欢迎横幅 */
.welcome-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    border: 3px solid var(--theme-light);
}
.welcome-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
    animation: bounce 2s infinite;
}
.welcome-text h2 {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--theme-color);
}
.welcome-text p {
    margin: 0;
    font-size: 13px;
    color: #888;
}
.welcome-date {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
    color: #aaa;
}

/* 区块标题 */
.section { margin-bottom: 28px; }
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 14px;
}
.title-icon { font-size: 22px; }
.section-hint {
    font-size: 13px;
    color: #999;
    margin: 0 0 14px;
}

/* 今日任务卡片 */
.today-task-card {
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}
.task-item:hover {
    background: var(--theme-light);
    transform: translateX(4px);
}
.task-item.completed {
    background: #E8F5E9;
    border-color: #A5D6A7;
}
.task-item.completed .task-check { color: #4CAF50; }
.task-item.completed .task-text { text-decoration: line-through; color: #999; }
.task-check { font-size: 20px; color: #ccc; width: 24px; text-align: center; }
.task-icon { font-size: 24px; }
.task-text { flex: 1; font-size: 15px; font-weight: 500; color: #333; }
.task-reward {
    font-size: 12px;
    color: #FF9F43;
    font-weight: 700;
    background: #FFF3E0;
    padding: 4px 10px;
    border-radius: 12px;
}

/* 学习模块网格 */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.module-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px 14px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: all 0.3s;
    border: 3px solid transparent;
    display: block;
}
.module-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.module-icon { font-size: 40px; margin-bottom: 8px; animation: bounce 2s infinite; }
.module-name { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 4px; }
.module-desc { font-size: 11px; color: #999; }
.module-num { border-color: #FFE0B2; }
.module-num .module-name { color: #FF9F43; }
.module-letter { border-color: #BBDEFB; }
.module-letter .module-name { color: #54A0FF; }
.module-char { border-color: #B2DFDB; }
.module-char .module-name { color: #1DD1A1; }
.module-story { border-color: #E1BEE7; }
.module-story .module-name { color: #A29BFE; }
.module-picture { border-color: #FFCDD2; }
.module-picture .module-name { color: #FF6B6B; }
.module-game { border-color: #FFF9C4; }
.module-game .module-name { color: #FECA57; }
.module-plan { border-color: #C8E6C9; }
.module-plan .module-name { color: #66BB6A; }
.module-today { border-color: #FFE0B2; background: linear-gradient(135deg, #FFF8E1, #FFECB3); }
.module-today .module-name { color: #FF9F43; }
.module-today .module-icon { animation: bounce 1.5s infinite; }

/* 成就墙 */
.achievement-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.achievement-item {
    background: #fff;
    border-radius: 14px;
    padding: 16px 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    opacity: 0.4;
    filter: grayscale(0.8);
    transition: all 0.3s;
}
.achievement-item.unlocked {
    opacity: 1;
    filter: none;
    border: 2px solid #FECA57;
    box-shadow: 0 4px 16px rgba(254,202,87,0.3);
}
.achievement-icon { font-size: 32px; margin-bottom: 6px; }
.achievement-name { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 2px; }
.achievement-desc { font-size: 10px; color: #999; }

/* ============================================================
   数字/字母/汉字学习页
   ============================================================ */
.number-grid, .letter-grid, .char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
.number-card, .letter-card, .char-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: all 0.3s;
    border: 3px solid var(--theme-light);
}
.number-card:hover, .letter-card:hover, .char-card:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-color: var(--theme-color);
}
.number-big {
    font-size: 42px;
    font-weight: 800;
    color: var(--theme-color);
    line-height: 1;
}
.number-objects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin: 8px 0;
    min-height: 24px;
}
.num-obj { font-size: 14px; }
.number-word { font-size: 13px; color: #888; font-weight: 600; }

.letter-big {
    font-size: 38px;
    font-weight: 800;
    color: var(--theme-color);
    line-height: 1;
}
.letter-small {
    font-size: 18px;
    color: #aaa;
    font-weight: 600;
    margin-top: 2px;
}

.char-big {
    font-size: 40px;
    font-weight: 700;
    color: var(--theme-color);
    line-height: 1;
    font-family: "KaiTi", "楷体", serif;
}
.char-pinyin {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

/* 练习卡片 */
.practice-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    text-align: center;
}
.practice-question p {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px;
}
.practice-objects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    min-height: 50px;
}
.practice-objects span { font-size: 32px; }
.practice-options {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.practice-option {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--theme-light);
    background: #fff;
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-color);
    cursor: pointer;
    transition: all 0.3s;
}
.practice-option:hover { border-color: var(--theme-color); transform: scale(1.1); }
.practice-option.correct { background: #4CAF50; color: #fff; border-color: #4CAF50; }
.practice-option.wrong { background: #f44336; color: #fff; border-color: #f44336; animation: shake 0.4s; }
.practice-result {
    min-height: 30px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
.practice-result.correct { color: #4CAF50; }
.practice-result.wrong { color: #f44336; }

/* 按钮 */
.btn-primary {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color));
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.btn-secondary {
    background: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-secondary:hover { background: #e0e0e0; }
.btn-complete {
    background: linear-gradient(135deg, #FECA57, #FF9F43);
    color: #fff;
    border: none;
    padding: 18px 40px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(255,159,67,0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}
.btn-complete:hover { transform: scale(1.05); box-shadow: 0 8px 28px rgba(255,159,67,0.5); }
.complete-section { text-align: center; padding: 20px 0; }

/* 歌曲卡片 */
.song-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    text-align: center;
}
.song-card p {
    font-size: 16px;
    line-height: 2;
    color: #555;
    margin: 0 0 16px;
}
.abc-song {
    font-size: 20px !important;
    font-weight: 600;
    color: var(--theme-color) !important;
    letter-spacing: 2px;
}

/* 字母游戏 */
.target-letter {
    display: inline-block;
    font-size: 36px;
    font-weight: 800;
    color: var(--theme-color);
    background: var(--theme-light);
    padding: 4px 20px;
    border-radius: 12px;
    margin: 0 4px;
}
.letter-game-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 400px;
    margin: 0 auto 16px;
}

/* 周次标签 */
.week-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.week-tab {
    flex: 1;
    min-width: 120px;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 3px solid transparent;
    transition: all 0.3s;
}
.week-tab.active {
    border-color: var(--theme-color);
    background: var(--theme-light);
}
.week-tab:hover { transform: translateY(-2px); }
.week-num { display: block; font-size: 15px; font-weight: 700; color: var(--theme-color); }
.week-theme { display: block; font-size: 11px; color: #999; margin-top: 2px; }

/* 描红田字格 */
.char-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.char-select-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid var(--theme-light);
    background: #fff;
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-color);
    cursor: pointer;
    font-family: "KaiTi", "楷体", serif;
    transition: all 0.3s;
}
.char-select-btn:hover, .char-select-btn.active {
    border-color: var(--theme-color);
    background: var(--theme-light);
}
.tian-grid {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    border: 3px solid #e0e0e0;
    border-radius: 8px;
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tian-grid::before, .tian-grid::after {
    content: '';
    position: absolute;
    background: #f0f0f0;
}
.tian-grid::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.tian-grid::after { top: 50%; left: 0; right: 0; height: 1px; }
.tian-char {
    font-size: 120px;
    font-weight: 400;
    color: rgba(0,0,0,0.15);
    font-family: "KaiTi", "楷体", serif;
    z-index: 1;
    user-select: none;
}
.practice-info p { font-size: 14px; color: #666; margin: 0 0 12px; }

/* ============================================================
   故事页面
   ============================================================ */
.story-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.story-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 18px;
    padding: 16px 20px;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: all 0.3s;
    border: 3px solid transparent;
}
.story-card:hover {
    transform: translateX(6px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    border-color: var(--theme-color);
}
.story-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
}
.story-info { flex: 1; }
.story-title { font-size: 17px; font-weight: 700; color: #333; margin: 0 0 4px; }
.story-theme { font-size: 12px; color: #888; margin: 0 0 2px; }
.story-suitable { font-size: 11px; color: #aaa; margin: 0; }
.story-arrow { font-size: 24px; color: #ccc; transition: transform 0.3s; }
.story-card:hover .story-arrow { transform: translateX(4px); color: var(--theme-color); }

/* 故事详情 */
.story-cover {
    text-align: center;
    background: #fff;
    border-radius: 24px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    border: 3px solid var(--theme-light);
}
.story-cover-icon { font-size: 64px; margin-bottom: 12px; animation: bounce 2s infinite; }
.story-cover-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--theme-color);
    margin: 0 0 12px;
}
.story-cover-meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.meta-tag {
    background: var(--theme-light);
    color: var(--theme-color);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.story-content-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.story-text {
    font-size: 17px;
    line-height: 2;
    color: #444;
    margin-bottom: 16px;
    text-indent: 2em;
}
.story-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* 故事场景图 */
.story-scenes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.scene-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s;
    border: 2px solid transparent;
}
.scene-item:hover {
    transform: scale(1.03);
    border-color: var(--theme-color);
}
.scene-num {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    background: var(--theme-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}
.scene-item { position: relative; }
.scene-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--theme-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.scene-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scene-fallback {
    display: none;
    font-size: 40px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.scene-title {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-align: center;
}

/* 问题卡片 */
.questions-card {
    background: #fff;
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.question-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}
.question-item:hover { background: var(--theme-light); }
.question-num {
    width: 28px;
    height: 28px;
    background: var(--theme-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.question-text { flex: 1; font-size: 15px; color: #333; font-weight: 500; }
.question-toggle { color: #ccc; font-size: 12px; transition: transform 0.3s; }
.question-item.open .question-toggle { transform: rotate(180deg); }

/* 提示卡片 */
.tip-card {
    background: linear-gradient(135deg, #FFF9E6, #FFF3E0);
    border-radius: 18px;
    padding: 20px;
    border: 2px dashed #FECA57;
}
.tip-card p { font-size: 14px; color: #666; margin: 0 0 12px; line-height: 1.8; }
.tip-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tip-word {
    background: #fff;
    border: 2px solid #FECA57;
    color: #FF9F43;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================
   看图说话
   ============================================================ */
.scene-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.scene-select-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 20px;
    padding: 8px 14px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all 0.3s;
}
.scene-select-item.active {
    border-color: var(--theme-color);
    background: var(--theme-light);
}
.scene-select-item:hover { transform: translateY(-2px); }
.scene-select-num {
    width: 22px;
    height: 22px;
    background: var(--theme-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.scene-select-title { font-size: 13px; font-weight: 600; color: #555; }

.picture-talk-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.picture-talk-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--theme-light);
}
.picture-talk-num {
    background: var(--theme-color);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.picture-talk-title { flex: 1; font-size: 20px; font-weight: 700; color: var(--theme-color); margin: 0; }
.picture-talk-season {
    background: #fff;
    color: #888;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}
.picture-talk-image {
    width: 100%;
    aspect-ratio: 16/9;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.picture-talk-image img { width: 100%; height: 100%; object-fit: cover; }
.picture-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #ccc;
}
.picture-fallback p { font-size: 16px; margin: 0; }

.scene-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.scene-nav-btn {
    background: #fff;
    color: var(--theme-color);
    padding: 10px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.3s;
}
.scene-nav-btn:hover { transform: scale(1.05); background: var(--theme-color); color: #fff; }

/* ============================================================
   游戏页面
   ============================================================ */
.game-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.game-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 16px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.game-tab.active {
    border-color: var(--theme-color);
    background: var(--theme-light);
}
.game-tab:hover { transform: translateY(-2px); }
.game-tab-icon { font-size: 28px; }
.game-tab span:last-child { font-size: 13px; font-weight: 600; color: #555; }

.game-panel { display: none; }
.game-panel.active { display: block; }

.game-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

/* 记忆翻牌 */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}
.memory-card {
    aspect-ratio: 1;
    border-radius: 12px;
    cursor: pointer;
    perspective: 600px;
    position: relative;
}
.memory-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}
.memory-card.flipped .memory-card-inner { transform: rotateY(180deg); }
.memory-card-front, .memory-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.memory-card-front {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color));
    color: #fff;
}
.memory-card-back {
    background: #fff;
    border: 3px solid var(--theme-light);
    transform: rotateY(180deg);
}
.memory-card.matched .memory-card-back {
    background: #E8F5E9;
    border-color: #A5D6A7;
    animation: pulse 0.5s;
}

/* 数字配对 */
.match-game {
    display: flex;
    gap: 30px;
    justify-content: center;
}
.match-column { flex: 1; max-width: 200px; }
.match-column h4 { text-align: center; color: #666; margin: 0 0 12px; }
.match-items { display: flex; flex-direction: column; gap: 10px; }
.match-item {
    background: #fff;
    border: 3px solid var(--theme-light);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-color);
}
.match-item:hover { border-color: var(--theme-color); transform: scale(1.05); }
.match-item.selected { border-color: var(--theme-color); background: var(--theme-light); }
.match-item.matched { background: #E8F5E9; border-color: #A5D6A7; color: #4CAF50; }

/* 找不同 */
.find-game {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.find-image {
    flex: 1;
    max-width: 280px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.find-scene {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 150px;
    margin-bottom: 8px;
}
.find-image p { font-size: 12px; color: #999; margin: 0; }
.find-diff { cursor: pointer; transition: all 0.3s; }
.find-diff:hover { transform: scale(1.2); }
.find-diff.found {
    outline: 3px solid #4CAF50;
    border-radius: 8px;
    background: #E8F5E9;
}

.game-result {
    text-align: center;
    margin: 16px 0;
    font-size: 16px;
    font-weight: 600;
    min-height: 30px;
}
.game-result.win { color: #4CAF50; }

/* ============================================================
   弹窗
   ============================================================ */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal.active { display: flex; animation: fadeIn 0.3s; }
.modal-content {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: slideUp 0.4s;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}
.modal-close:hover { color: #666; }
.modal-number, .modal-letter {
    font-size: 80px;
    font-weight: 800;
    color: var(--theme-color);
    line-height: 1;
    margin-bottom: 8px;
}
.modal-number-word, .modal-letter-small {
    font-size: 24px;
    color: #888;
    margin-bottom: 16px;
}
.modal-objects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    min-height: 40px;
}
.modal-objects span { font-size: 28px; }
.modal-letter-word {
    font-size: 18px;
    color: #555;
    margin-bottom: 16px;
    font-weight: 600;
}
.modal-char {
    font-size: 72px;
    font-weight: 700;
    color: var(--theme-color);
    font-family: "KaiTi", "楷体", serif;
    line-height: 1;
    margin-bottom: 4px;
}
.modal-pinyin { font-size: 20px; color: #888; margin-bottom: 4px; }
.modal-meaning { font-size: 16px; color: #666; margin-bottom: 16px; }
.modal-section { text-align: left; margin-bottom: 14px; }
.modal-section h4 { font-size: 14px; color: #888; margin: 0 0 8px; }
.modal-section p { font-size: 15px; color: #333; margin: 0; line-height: 1.6; }
.modal-words { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-words span {
    background: var(--theme-light);
    color: var(--theme-color);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

/* 场景弹窗 */
.scene-modal { max-width: 500px; }
.scene-modal-num {
    display: inline-block;
    background: var(--theme-color);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 12px;
}
.scene-modal img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 12px;
}
.scene-modal-title { font-size: 20px; font-weight: 700; color: var(--theme-color); margin-bottom: 8px; }
.scene-modal-hint { font-size: 14px; color: #888; margin: 0; }

/* 星星弹窗 */
.star-popup {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.star-popup.active { display: flex; animation: fadeIn 0.3s; }
.star-popup-content {
    background: #fff;
    border-radius: 24px;
    padding: 30px 40px;
    text-align: center;
    animation: bounceIn 0.5s;
}
.star-popup-icon { font-size: 64px; margin-bottom: 12px; animation: bounce 1s infinite; }
.star-popup-content h3 { font-size: 24px; color: #FF9F43; margin: 0 0 8px; }
.star-popup-content p { font-size: 16px; color: #666; margin: 0 0 20px; }
.star-popup-content button {
    background: linear-gradient(135deg, #FECA57, #FF9F43);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s;
}
.star-popup-content button:hover { transform: scale(1.05); }

/* 动画 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 响应式 */
@media (max-width: 600px) {
    .story-scenes { grid-template-columns: repeat(2, 1fr); }
    .module-grid { grid-template-columns: repeat(2, 1fr); }
    .welcome-banner { flex-wrap: wrap; }
    .welcome-date { display: none; }
    .match-game { flex-direction: column; align-items: center; }
    .find-game { flex-direction: column; align-items: center; }
}

/* ============================================================
   打印素材库
   ============================================================ */
.module-count {
    display: inline-block;
    margin-top: 6px;
    background: var(--theme-light);
    color: var(--theme-color);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.print-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.print-item {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: all 0.3s;
    border: 2px solid transparent;
}
.print-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-color: var(--theme-color);
}
.print-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.print-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.print-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #ccc;
}
.print-name {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-align: center;
    line-height: 1.3;
}

/* 打印图片弹窗 */
.print-image-modal {
    max-width: 700px;
    padding: 20px;
}
.print-image-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 12px;
    text-align: center;
}
.print-image-modal img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 16px;
    max-height: 60vh;
    object-fit: contain;
    background: #f5f5f5;
}
.print-image-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* 打印样式 */
@media print {
    .top-nav, .bg-decor, .welcome-banner, .section-title, .tip-card, .print-image-actions {
        display: none !important;
    }
    .print-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    body { background: #fff; }
}

/* 首页额外入口 */
.home-extra {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.home-extra-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 14px 28px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border: 2px solid #EDE7FF;
    transition: all 0.3s;
}
.home-extra-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(95,39,205,0.2);
    border-color: #5F27CD;
}
.home-extra-icon { font-size: 28px; }
.home-extra-text { font-size: 16px; font-weight: 700; color: #5F27CD; }
.home-extra-desc { font-size: 12px; color: #999; margin-left: 8px; }
.home-extra-today {
    border-color: #FFE0B2;
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
}
.home-extra-today:hover {
    border-color: #FF9F43;
    box-shadow: 0 6px 20px rgba(255,159,67,0.3);
}
.home-extra-today .home-extra-text { color: #FF9F43; }
.home-extra-today .home-extra-icon { animation: bounce 1.5s infinite; }

/* ============================================================
   移动端适配 - 一屏显示，禁止滚动
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }
    .container {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        padding: 2vh 3vw;
        box-sizing: border-box;
        overflow: hidden;
    }
    .home-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5vh;
        padding-top: 2vh;
    }
    .home-header { margin-bottom: 0; text-align: center; }
    .home-title-icon { font-size: 6vw; margin-bottom: 0.5vh; }
    .home-title { font-size: 5vw; margin-bottom: 0.3vh; }
    .home-subtitle { font-size: 2.8vw; margin-bottom: 0.5vh; }
    .home-time-badge { font-size: 2.5vw; padding: 0.5vh 2vw; }
    .child-cards {
        flex-direction: column;
        gap: 1.5vh;
        width: 90vw;
        max-width: 90vw;
    }
    .child-card { padding: 1.5vh 3vw; min-height: 10vh; }
    .child-avatar { width: 10vw; height: 10vw; min-width: 10vw; }
    .child-avatar-icon { font-size: 5vw; }
    .child-name { font-size: 4vw; }
    .child-nickname { font-size: 2.5vw; }
    .child-goal { font-size: 2.2vw; }
    .home-extra { gap: 2vw; width: 90vw; max-width: 90vw; }
    .home-extra-card { padding: 1.2vh 2vw; flex: 1; }
    .home-extra-icon { font-size: 5vw; }
    .home-extra-text { font-size: 3vw; }
    .home-extra-desc { font-size: 2.2vw; }
    .bookshelf-container {
        padding: 2vh 2vw;
        height: 100vh;
        overflow: hidden;
    }
    .bookshelf-title { font-size: 4vw; margin-bottom: 1vh; }
    .shelf-row { gap: 2vw; margin-bottom: 1vh; padding: 0 1vw; }
    .book-item { width: 13vw; height: 18vw; min-width: 13vw; }
    .book-cover { width: 13vw; height: 18vw; }
    .book-cover img { width: 13vw; height: 18vw; }
    .book-title { font-size: 2vw; margin-top: 0.5vh; }
    .shelf-row::after { height: 1vh; }
    .story-bookshelf { padding: 2vh 3vw; height: 100vh; overflow: hidden; }
    .story-bookshelf-title { font-size: 4vw; margin-bottom: 1vh; }
    .story-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2vw;
        overflow-y: auto;
        max-height: 80vh;
        -webkit-overflow-scrolling: touch;
    }
    .story-card { padding: 1.5vh 2vw; min-height: 12vh; }
    .story-card-icon { font-size: 6vw; }
    .story-card-title { font-size: 2.8vw; }
    .story-card-meta { font-size: 2vw; }
    .story-detail {
        padding: 1.5vh 3vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .story-detail-header { margin-bottom: 1vh; flex-shrink: 0; }
    .story-detail-title { font-size: 4vw; }
    .story-detail-meta { font-size: 2.5vw; }
    .story-scenes {
        display: flex;
        gap: 2vw;
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }
    .story-scene { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .story-scene img {
        width: 100%;
        height: auto;
        max-height: 35vh;
        object-fit: cover;
        border-radius: 8px;
    }
    .story-scene-text {
        font-size: 2.5vw;
        line-height: 1.4;
        margin-top: 0.5vh;
        flex: 1;
        overflow-y: auto;
    }
    .story-nav { margin-top: 1vh; flex-shrink: 0; }
    .story-nav-btn { padding: 1vh 3vw; font-size: 3vw; }
    .card-book {
        padding: 1.5vh 3vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .card-book-header { margin-bottom: 1vh; flex-shrink: 0; }
    .card-book-title { font-size: 4vw; }
    .card-book-progress { font-size: 2.5vw; }
    .card-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
    }
    .card {
        width: 80vw;
        max-width: 80vw;
        padding: 2vh 4vw;
        min-height: 50vh;
        max-height: 65vh;
        overflow: hidden;
    }
    .card-cover { min-height: 50vh; max-height: 65vh; }
    .card-cover-title { font-size: 6vw; }
    .card-cover-subtitle { font-size: 3vw; }
    .card-char { font-size: 18vw; line-height: 1; margin: 1vh 0; }
    .card-pinyin { font-size: 4vw; }
    .card-meaning { font-size: 3vw; }
    .card-words { font-size: 2.8vw; gap: 1vw; }
    .card-word { padding: 0.5vh 2vw; }
    .card-sentence { font-size: 2.8vw; padding: 1vh 2vw; }
    .card-image { max-height: 25vh; width: auto; max-width: 100%; }
    .card-nav { margin-top: 1vh; flex-shrink: 0; gap: 2vw; }
    .card-nav-btn { padding: 1vh 4vw; font-size: 3vw; min-width: 20vw; }
    .card-home-btn { padding: 1vh 3vw; font-size: 3vw; }
    .practice-container {
        padding: 1.5vh 2vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .practice-header { margin-bottom: 1vh; flex-shrink: 0; }
    .practice-title { font-size: 4vw; }
    .practice-library-select { padding: 0.8vh 2vw; font-size: 2.8vw; }
    .practice-char-list {
        max-height: 10vh;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0.5vh 0;
        flex-shrink: 0;
    }
    .practice-char-item {
        display: inline-block;
        width: 8vw;
        height: 8vw;
        line-height: 8vw;
        font-size: 4vw;
        margin: 0 0.5vw;
    }
    .practice-main {
        display: flex;
        gap: 2vw;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .practice-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .practice-example {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .practice-example svg { max-height: 30vh; width: auto; }
    .practice-controls {
        margin-top: 1vh;
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1vw;
        justify-content: center;
    }
    .practice-btn { padding: 0.8vh 2vw; font-size: 2.5vw; min-width: 15vw; }
    .practice-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .practice-canvas-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #practiceCanvas { max-width: 100%; max-height: 40vh; width: auto; height: auto; }
    .practice-score { margin-top: 1vh; flex-shrink: 0; font-size: 3vw; }
    .courseware-container {
        padding: 1.5vh 3vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .courseware-header { margin-bottom: 1vh; flex-shrink: 0; }
    .courseware-title { font-size: 4vw; }
    .courseware-slide {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        padding: 2vh 3vw;
    }
    .slide-cover-title { font-size: 6vw; }
    .slide-cover-subtitle { font-size: 3vw; }
    .slide-section-title { font-size: 5vw; }
    .slide-content-title { font-size: 4vw; }
    .slide-content-text { font-size: 3vw; line-height: 1.5; }
    .slide-image { max-height: 35vh; width: auto; max-width: 100%; }
    .courseware-nav { margin-top: 1vh; flex-shrink: 0; }
    .courseware-nav-btn { padding: 1vh 4vw; font-size: 3vw; }
    .btn { padding: 1vh 3vw; font-size: 3vw; }
    .btn-primary { padding: 1vh 4vw; font-size: 3vw; }
    h1 { font-size: 5vw; }
    h2 { font-size: 4vw; }
    h3 { font-size: 3.5vw; }
    p { font-size: 2.8vw; line-height: 1.5; }
    .bg-decor { display: none; }
    .star, .cloud { display: none; }
}
@media (max-width: 480px) {
    .card-char { font-size: 22vw; }
    .story-scenes { flex-direction: column; }
    .story-scene img { max-height: 25vh; }
    .practice-main { flex-direction: column; }
    .practice-example svg { max-height: 20vh; }
    #practiceCanvas { max-height: 35vh; }
}

/* ============================================================
   横屏模式适配 - 手机横屏一屏显示
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    html, body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }
    .container {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        padding: 1.5vh 2vw;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* ========== 首页横屏适配 ========== */
    .home-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5vh 2vw;
        padding-top: 1vh;
        height: 100vh;
    }
    .home-header {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }
    .home-title-icon { font-size: 4vh; margin-bottom: 0.3vh; }
    .home-title { font-size: 3.5vh; margin-bottom: 0.2vh; }
    .home-subtitle { font-size: 2vh; margin-bottom: 0.3vh; }
    .home-time-badge { font-size: 1.8vh; padding: 0.3vh 1.5vw; }
    .child-cards {
        flex-direction: row;
        gap: 2vw;
        width: 60vw;
        max-width: 60vw;
        justify-content: center;
    }
    .child-card {
        padding: 1vh 1.5vw;
        min-height: 12vh;
        flex: 1;
    }
    .child-avatar { width: 7vh; height: 7vh; min-width: 7vh; }
    .child-avatar-icon { font-size: 3.5vh; }
    .child-name { font-size: 2.8vh; }
    .child-nickname { font-size: 1.8vh; }
    .child-goal { font-size: 1.5vh; }
    .home-extra {
        gap: 1.5vw;
        width: 60vw;
        max-width: 60vw;
    }
    .home-extra-card {
        padding: 0.8vh 1.5vw;
        flex: 1;
    }
    .home-extra-icon { font-size: 3vh; }
    .home-extra-text { font-size: 2vh; }
    .home-extra-desc { font-size: 1.5vh; }

    /* ========== 书架横屏适配 ========== */
    .bookshelf-container {
        padding: 1.5vh 2vw;
        height: 100vh;
        overflow: hidden;
    }
    .bookshelf-title {
        font-size: 3vh;
        margin-bottom: 0.8vh;
    }
    .shelf-row {
        gap: 1.5vw;
        margin-bottom: 0.8vh;
        padding: 0 1vw;
        justify-content: center;
    }
    .book-item {
        width: 10vw;
        height: 14vw;
        min-width: 10vw;
        max-height: 22vh;
    }
    .book-cover {
        width: 10vw;
        height: 14vw;
        max-height: 22vh;
    }
    .book-cover img {
        width: 10vw;
        height: 14vw;
        max-height: 22vh;
        object-fit: cover;
    }
    .book-title {
        font-size: 1.5vh;
        margin-top: 0.3vh;
    }
    .shelf-row::after { height: 0.8vh; }

    /* ========== 故事书列表横屏适配 ========== */
    .story-bookshelf {
        padding: 1.5vh 2vw;
        height: 100vh;
        overflow: hidden;
    }
    .story-bookshelf-title {
        font-size: 3vh;
        margin-bottom: 0.8vh;
    }
    .story-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5vw;
        overflow-y: auto;
        max-height: 85vh;
        -webkit-overflow-scrolling: touch;
    }
    .story-card {
        padding: 1vh 1vw;
        min-height: 10vh;
    }
    .story-card-icon { font-size: 4vh; }
    .story-card-title { font-size: 2vh; }
    .story-card-meta { font-size: 1.5vh; }

    /* ========== 故事详情横屏适配 ========== */
    .story-detail {
        padding: 1vh 2vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .story-detail-header {
        margin-bottom: 0.5vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 2vw;
    }
    .story-detail-title {
        font-size: 3vh;
        margin: 0;
    }
    .story-detail-meta {
        font-size: 1.8vh;
        margin: 0;
    }
    .story-scenes {
        display: flex;
        gap: 1.5vw;
        flex: 1;
        overflow: hidden;
        min-height: 0;
    }
    .story-scene {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .story-scene img {
        width: 100%;
        height: auto;
        max-height: 45vh;
        object-fit: cover;
        border-radius: 8px;
    }
    .story-scene-text {
        font-size: 1.8vh;
        line-height: 1.3;
        margin-top: 0.5vh;
        flex: 1;
        overflow-y: auto;
    }
    .story-nav {
        margin-top: 0.5vh;
        flex-shrink: 0;
    }
    .story-nav-btn {
        padding: 0.6vh 2vw;
        font-size: 2vh;
    }

    /* ========== 卡片书横屏适配 ========== */
    .card-book {
        padding: 1vh 2vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .card-book-header {
        margin-bottom: 0.5vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .card-book-title { font-size: 3vh; margin: 0; }
    .card-book-progress { font-size: 1.8vh; margin: 0; }
    .card-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
    }
    .card {
        width: 70vw;
        max-width: 70vw;
        padding: 1.5vh 3vw;
        min-height: 60vh;
        max-height: 75vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .card-cover {
        min-height: 60vh;
        max-height: 75vh;
    }
    .card-cover-title { font-size: 5vh; }
    .card-cover-subtitle { font-size: 2.5vh; }
    .card-char {
        font-size: 14vh;
        line-height: 1;
        margin: 0.5vh 0;
    }
    .card-pinyin { font-size: 3vh; }
    .card-meaning { font-size: 2.2vh; }
    .card-words {
        font-size: 2vh;
        gap: 0.8vw;
        flex-wrap: wrap;
        justify-content: center;
    }
    .card-word { padding: 0.3vh 1vw; }
    .card-sentence {
        font-size: 2vh;
        padding: 0.5vh 1.5vw;
        margin-top: 0.5vh;
    }
    .card-image {
        max-height: 30vh;
        width: auto;
        max-width: 100%;
    }
    .card-nav {
        margin-top: 0.5vh;
        flex-shrink: 0;
        gap: 1.5vw;
    }
    .card-nav-btn {
        padding: 0.6vh 3vw;
        font-size: 2vh;
        min-width: 15vw;
    }
    .card-home-btn {
        padding: 0.6vh 2vw;
        font-size: 2vh;
    }

    /* ========== 练字板横屏适配 ========== */
    .practice-container {
        padding: 1vh 1.5vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .practice-header {
        margin-bottom: 0.5vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 2vw;
    }
    .practice-title { font-size: 3vh; margin: 0; }
    .practice-library-select {
        padding: 0.5vh 1.5vw;
        font-size: 2vh;
    }
    .practice-char-list {
        max-height: 8vh;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0.3vh 0;
        flex-shrink: 0;
    }
    .practice-char-item {
        display: inline-block;
        width: 6vh;
        height: 6vh;
        line-height: 6vh;
        font-size: 3vh;
        margin: 0 0.3vw;
    }
    .practice-main {
        display: flex;
        gap: 2vw;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .practice-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .practice-example {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .practice-example svg {
        max-height: 40vh;
        width: auto;
    }
    .practice-controls {
        margin-top: 0.5vh;
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8vw;
        justify-content: center;
    }
    .practice-btn {
        padding: 0.5vh 1.5vw;
        font-size: 1.8vh;
        min-width: 10vw;
    }
    .practice-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .practice-canvas-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #practiceCanvas {
        max-width: 100%;
        max-height: 55vh;
        width: auto;
        height: auto;
    }
    .practice-score {
        margin-top: 0.5vh;
        flex-shrink: 0;
        font-size: 2.2vh;
    }

    /* ========== 每日课件横屏适配 ========== */
    .courseware-container {
        padding: 1vh 2vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .courseware-header {
        margin-bottom: 0.5vh;
        flex-shrink: 0;
    }
    .courseware-title { font-size: 3vh; margin: 0; }
    .courseware-slide {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        padding: 1.5vh 2vw;
    }
    .slide-cover-title { font-size: 5vh; }
    .slide-cover-subtitle { font-size: 2.5vh; }
    .slide-section-title { font-size: 4vh; }
    .slide-content-title { font-size: 3vh; }
    .slide-content-text {
        font-size: 2.2vh;
        line-height: 1.4;
    }
    .slide-image {
        max-height: 45vh;
        width: auto;
        max-width: 100%;
    }
    .courseware-nav {
        margin-top: 0.5vh;
        flex-shrink: 0;
    }
    .courseware-nav-btn {
        padding: 0.6vh 3vw;
        font-size: 2vh;
    }

    /* ========== 通用横屏适配 ========== */
    .btn { padding: 0.6vh 2vw; font-size: 2vh; }
    .btn-primary { padding: 0.6vh 2.5vw; font-size: 2vh; }
    h1 { font-size: 3.5vh; }
    h2 { font-size: 3vh; }
    h3 { font-size: 2.5vh; }
    p { font-size: 2vh; line-height: 1.4; }
    .bg-decor { display: none; }
    .star, .cloud { display: none; }
}

/* ============================================================
   App 样式导航栏 - 统一左上角返回按钮
   ============================================================ */
.app-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 56px;
    box-sizing: border-box;
}
.app-nav-back {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #5F27CD;
    font-weight: 600;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(95,39,205,0.08);
    transition: all 0.3s;
    min-width: 80px;
}
.app-nav-back:hover {
    background: #5F27CD;
    color: #fff;
}
.app-nav-icon {
    font-size: 18px;
}
.app-nav-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    text-align: center;
    flex: 1;
}
.app-nav-right {
    min-width: 80px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 移动端 App 导航栏 */
@media (max-width: 768px) {
    .app-nav-bar {
        padding: 8px 12px;
        height: 48px;
    }
    .app-nav-back {
        font-size: 12px;
        padding: 6px 10px;
        min-width: 60px;
    }
    .app-nav-icon {
        font-size: 14px;
    }
    .app-nav-title {
        font-size: 16px;
    }
    .app-nav-right {
        min-width: 60px;
    }
}

/* 横屏 App 导航栏 */
@media (max-width: 900px) and (orientation: landscape) {
    .app-nav-bar {
        padding: 6px 16px;
        height: 40px;
    }
    .app-nav-back {
        font-size: 11px;
        padding: 4px 10px;
        min-width: 50px;
    }
    .app-nav-icon {
        font-size: 12px;
    }
    .app-nav-title {
        font-size: 14px;
    }
    .app-nav-right {
        min-width: 50px;
    }
}

/* ============================================================
   可爱风格 + 主页动效增强
   ============================================================ */

/* 可爱按钮通用样式 */
.cute-btn {
    position: relative;
    border-radius: 25px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.cute-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.cute-btn:active {
    transform: translateY(0) scale(0.98);
}

/* 主页标题彩虹渐变 */
.home-title {
    background: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #A29BFE, #FF6B6B);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowShift 4s linear infinite;
}
@keyframes rainbowShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 主页图标跳动 */
.home-title-icon {
    animation: iconBounce 2s ease-in-out infinite;
    display: inline-block;
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(5deg); }
}

/* 孩子卡片可爱悬停 */
.child-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}
.child-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.child-card:hover::before {
    transform: translateX(100%);
}
.child-card:hover {
    transform: translateY(-8px) scale(1.03) rotate(-1deg);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.child-card:hover .child-avatar {
    animation: avatarWiggle 0.5s ease-in-out;
}
@keyframes avatarWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(1.1); }
}

/* 孩子头像脉冲 */
.child-avatar {
    animation: avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

/* 快捷入口卡片浮动 */
.home-extra-card {
    animation: cardFloat 3s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-extra-card:nth-child(2) {
    animation-delay: 0.5s;
}
.home-extra-card:nth-child(3) {
    animation-delay: 1s;
}
@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.home-extra-card:hover {
    animation-play-state: paused;
    transform: translateY(-10px) scale(1.05);
}

/* 快捷入口图标旋转 */
.home-extra-card:hover .home-extra-icon {
    animation: iconSpin 0.6s ease-in-out;
}
@keyframes iconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.3); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 时间徽章闪烁 */
.home-time-badge {
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 星星装饰动画 */
.star {
    animation: starTwinkle 2s ease-in-out infinite;
}
.star:nth-child(2) { animation-delay: 0.3s; }
.star:nth-child(3) { animation-delay: 0.6s; }
.star:nth-child(4) { animation-delay: 0.9s; }
@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* 云朵漂浮 */
.cloud {
    animation: cloudFloat 6s ease-in-out infinite;
}
.cloud-2 { animation-delay: 2s; }
@keyframes cloudFloat {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

/* 渐入动画增强 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 点击波纹效果 */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* 可爱滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A29BFE, #FF9FF3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6C5CE7, #F368E0);
}

/* 全局可爱过渡 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 按钮点击缩放 */
a:active, button:active {
    transform: scale(0.95);
}

/* 主页背景渐变动画 */
.home-page {
    background: linear-gradient(-45deg, #FFE5EC, #E0F7FF, #FFF5E6, #F0E6FF);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 书架书本悬停 */
.book-item {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.book-item:hover {
    transform: translateY(-12px) rotate(-3deg) scale(1.08);
    z-index: 10;
}
.book-item:hover .book-cover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* 故事卡片悬停 */
.story-card {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.story-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* 卡片翻页动效增强 */
.book-page.active {
    animation: pageFlipCute 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pageFlipCute {
    from {
        opacity: 0;
        transform: rotateY(-20deg) translateX(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotateY(0) translateX(0) scale(1);
    }
}

/* 语音按钮脉冲 */
.segment-speak-btn {
    transition: all 0.3s;
    animation: speakPulse 2s ease-in-out infinite;
}
@keyframes speakPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.segment-speak-btn:hover {
    transform: scale(1.3) rotate(15deg);
}

/* 移动端可爱动效保持 */
@media (max-width: 768px) {
    .home-title {
        font-size: 6vw;
    }
    .child-card:hover {
        transform: translateY(-4px) scale(1.02);
    }
    .book-item:hover {
        transform: translateY(-6px) scale(1.05);
    }
}

/* 横屏可爱动效保持 */
@media (max-width: 900px) and (orientation: landscape) {
    .home-title {
        font-size: 4vh;
    }
}

/* 可爱装饰元素位置和动画 */
.cute-deco {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

/* 彩虹 */
.rainbow {
    top: 8%;
    right: 5%;
    font-size: 40px;
    animation: rainbowFloat 4s ease-in-out infinite;
}
@keyframes rainbowFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* 气球 */
.balloon-1 {
    top: 15%;
    left: 3%;
    font-size: 35px;
    animation: balloonFloat 5s ease-in-out infinite;
}
.balloon-2 {
    top: 25%;
    right: 8%;
    font-size: 30px;
    animation: balloonFloat 6s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes balloonFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

/* 小动物 */
.animal-1 {
    bottom: 15%;
    left: 5%;
    font-size: 35px;
    animation: animalBounce 3s ease-in-out infinite;
}
.animal-2 {
    bottom: 20%;
    right: 6%;
    font-size: 32px;
    animation: animalBounce 3.5s ease-in-out infinite;
    animation-delay: 0.5s;
}
.animal-3 {
    top: 40%;
    left: 2%;
    font-size: 28px;
    animation: animalBounce 4s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes animalBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-10px) scale(1.1); }
    50% { transform: translateY(0) scale(1); }
    70% { transform: translateY(-5px) scale(1.05); }
}

/* 花朵 */
.flower-1 {
    bottom: 8%;
    left: 15%;
    font-size: 28px;
    animation: flowerSway 4s ease-in-out infinite;
}
.flower-2 {
    bottom: 10%;
    right: 15%;
    font-size: 30px;
    animation: flowerSway 5s ease-in-out infinite;
    animation-delay: 0.8s;
}
@keyframes flowerSway {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

/* 爱心和星星 */
.heart-1 {
    top: 35%;
    right: 3%;
    font-size: 25px;
    animation: heartBeat 1.5s ease-in-out infinite;
}
.heart-2 {
    top: 50%;
    left: 4%;
    font-size: 22px;
    animation: heartBeat 2s ease-in-out infinite;
    animation-delay: 0.5s;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* 移动端隐藏部分装饰，避免拥挤 */
@media (max-width: 768px) {
    .cute-deco {
        opacity: 0.4;
        font-size: 0.8em;
    }
    .animal-3, .heart-2, .flower-2 {
        display: none;
    }
    .rainbow { font-size: 25px; top: 5%; }
    .balloon-1, .balloon-2 { font-size: 22px; }
    .animal-1, .animal-2 { font-size: 25px; }
}

/* 横屏模式 */
@media (max-width: 900px) and (orientation: landscape) {
    .cute-deco {
        opacity: 0.3;
    }
    .rainbow { font-size: 22px; top: 3%; }
    .balloon-1, .balloon-2 { font-size: 20px; }
    .animal-1, .animal-2 { font-size: 22px; bottom: 8%; }
    .flower-1, .flower-2 { font-size: 18px; bottom: 5%; }
    .animal-3, .heart-1, .heart-2 { display: none; }
}

/* 首页可爱欢迎区 */
.home-welcome {
    text-align: center;
    margin-bottom: 2vh;
}
.welcome-icon-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}
.welcome-icon {
    font-size: 40px;
    display: inline-block;
    animation: welcomeBounce 2s ease-in-out infinite;
}
.welcome-icon.w1 { animation-delay: 0s; }
.welcome-icon.w2 { animation-delay: 0.2s; font-size: 50px; }
.welcome-icon.w3 { animation-delay: 0.4s; }
@keyframes welcomeBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-12px) rotate(-8deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(8deg); }
}
.welcome-text {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4, #A29BFE);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowShift 3s linear infinite;
}

/* 首页整体布局调整 */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    padding: 3vh 20px;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 孩子卡片更可爱 */
.child-cards {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 700px;
}
.child-card {
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    background: #fff;
    border-radius: 25px;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.child-card.card-meimei {
    background: linear-gradient(135deg, #FFF0F5, #FFE4EC);
    border-color: #FFB6C1;
}
.child-card.card-gege {
    background: linear-gradient(135deg, #F0F8FF, #E0F0FF);
    border-color: #87CEEB;
}
.child-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.child-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: avatarPulse 3s ease-in-out infinite;
}
.child-info {
    flex: 1;
    min-width: 0;
}
.child-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #333;
}
.child-nickname {
    font-size: 13px;
    color: #888;
    margin: 0 0 4px 0;
}
.child-goal {
    font-size: 12px;
    color: #aaa;
    margin: 0;
}
.child-card-arrow {
    font-size: 24px;
    color: #ccc;
    flex-shrink: 0;
    transition: all 0.3s;
}
.child-card:hover .child-card-arrow {
    transform: translateX(5px);
    color: #FF6B6B;
}
.child-card-sparkle {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    animation: sparkleTwinkle 1.5s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 快捷入口更可爱 */
.home-extra {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 700px;
    justify-content: center;
    flex-wrap: wrap;
}
.home-extra-card {
    flex: 1;
    min-width: 150px;
    max-width: 220px;
    background: #fff;
    border-radius: 20px;
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    border: 2px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: cardFloat 3s ease-in-out infinite;
}
.home-extra-card:nth-child(2) { animation-delay: 0.5s; }
.home-extra-card:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.home-extra-icon {
    font-size: 32px;
    transition: transform 0.3s;
}
.home-extra-card:hover .home-extra-icon {
    transform: scale(1.2) rotate(10deg);
}
.home-extra-text {
    font-size: 15px;
    font-weight: 700;
    color: #5F27CD;
}
.home-extra-desc {
    font-size: 11px;
    color: #999;
}

/* 移动端首页适配 */
@media (max-width: 768px) {
    .home-container {
        padding: 2vh 15px;
        gap: 1.5vh;
    }
    .welcome-icon { font-size: 28px; }
    .welcome-icon.w2 { font-size: 35px; }
    .welcome-text { font-size: 18px; }
    .child-cards { gap: 15px; }
    .child-card {
        min-width: 90%;
        padding: 18px 15px;
    }
    .child-avatar { width: 55px; height: 55px; font-size: 28px; }
    .child-name { font-size: 18px; }
    .home-extra { gap: 10px; }
    .home-extra-card {
        min-width: 45%;
        padding: 12px 10px;
    }
    .home-extra-icon { font-size: 24px; }
    .home-extra-text { font-size: 13px; }
    .home-extra-desc { font-size: 10px; }
}

/* 横屏首页适配 */
@media (max-width: 900px) and (orientation: landscape) {
    .home-container {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 1vh 20px;
        gap: 1.5vh 2vw;
        align-content: center;
    }
    .home-welcome {
        width: 100%;
        margin-bottom: 0.5vh;
    }
    .welcome-icon { font-size: 22px; }
    .welcome-icon.w2 { font-size: 28px; }
    .welcome-text { font-size: 16px; }
    .child-cards {
        width: 55%;
        gap: 15px;
    }
    .child-card {
        min-width: 45%;
        padding: 12px 15px;
    }
    .child-avatar { width: 45px; height: 45px; font-size: 22px; }
    .child-name { font-size: 16px; }
    .child-nickname { font-size: 11px; }
    .child-goal { font-size: 10px; }
    .home-extra {
        width: 40%;
        flex-direction: column;
        gap: 10px;
    }
    .home-extra-card {
        min-width: 100%;
        padding: 10px 12px;
        flex-direction: row;
        justify-content: flex-start;
    }
    .home-extra-icon { font-size: 20px; }
    .home-extra-text { font-size: 12px; }
    .home-extra-desc { font-size: 10px; margin-left: auto; }
}

/* 首页三大功能入口 */
.home-main-entries {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 2vh 0;
}
.main-entry {
    flex: 1;
    min-width: 200px;
    max-width: 240px;
    background: #fff;
    border-radius: 25px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: entryFloat 3s ease-in-out infinite;
}
.main-entry:nth-child(2) { animation-delay: 0.5s; }
.main-entry:nth-child(3) { animation-delay: 1s; }
@keyframes entryFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.main-entry::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.main-entry:hover::before {
    transform: translateX(100%);
}
.main-entry:hover {
    transform: translateY(-12px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    animation-play-state: paused;
}
.entry-icon {
    font-size: 55px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.main-entry:hover .entry-icon {
    transform: scale(1.2) rotate(-10deg);
}
.entry-title {
    font-size: 22px;
    font-weight: 800;
    color: #333;
}
.entry-desc {
    font-size: 12px;
    color: #999;
    text-align: center;
}

/* 学习书架入口 - 紫色 */
.entry-bookshelf {
    background: linear-gradient(135deg, #F3E8FF, #E9D5FF);
    border-color: #C4B5FD;
}
.entry-bookshelf .entry-title { color: #7C3AED; }

/* 练字板入口 - 橙色 */
.entry-practice {
    background: linear-gradient(135deg, #FFF7E6, #FFE8CC);
    border-color: #FDBA74;
}
.entry-practice .entry-title { color: #EA580C; }

/* 打印素材入口 - 蓝色 */
.entry-print {
    background: linear-gradient(135deg, #E0F2FE, #BAE6FD);
    border-color: #7DD3FC;
}
.entry-print .entry-title { color: #0284C7; }

/* 入口装饰小元素 */
.main-entry::after {
    content: '✨';
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 16px;
    animation: sparkleTwinkle 1.5s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 移动端三大入口 */
@media (max-width: 768px) {
    .home-main-entries {
        gap: 15px;
        flex-direction: column;
        align-items: center;
    }
    .main-entry {
        min-width: 85%;
        max-width: 85%;
        padding: 20px 15px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 15px;
    }
    .entry-icon { font-size: 40px; }
    .entry-title { font-size: 18px; }
    .entry-desc { font-size: 11px; text-align: left; }
    .main-entry::after { display: none; }
}

/* 横屏三大入口 */
@media (max-width: 900px) and (orientation: landscape) {
    .home-main-entries {
        gap: 15px;
        width: 90%;
    }
    .main-entry {
        min-width: 28%;
        padding: 15px 10px;
        gap: 8px;
    }
    .entry-icon { font-size: 35px; }
    .entry-title { font-size: 16px; }
    .entry-desc { font-size: 10px; }
}

/* 布丁果冻效果 - 首页菜单 */
.main-entry {
    border-radius: 30px 30px 25px 25px;
    position: relative;
    overflow: visible;
}

/* 布丁顶部高光 */
.main-entry::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

/* 布丁底部阴影 */
.main-entry::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.15), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* 布丁弹性动画 */
@keyframes puddingWobble {
    0% { transform: translateY(0) scale(1, 1); }
    15% { transform: translateY(-10px) scale(1.05, 0.95); }
    30% { transform: translateY(0) scale(0.95, 1.05); }
    45% { transform: translateY(-5px) scale(1.02, 0.98); }
    60% { transform: translateY(0) scale(0.98, 1.02); }
    75% { transform: translateY(-2px) scale(1.01, 0.99); }
    100% { transform: translateY(0) scale(1, 1); }
}

.main-entry:hover {
    animation: puddingWobble 0.8s ease-in-out;
    transform-origin: center bottom;
}

/* 布丁图标弹跳 */
.entry-icon {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
}
.main-entry:hover .entry-icon {
    animation: iconBouncePudding 0.6s ease-in-out;
}
@keyframes iconBouncePudding {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-15px) scale(1.2); }
    50% { transform: translateY(0) scale(0.9); }
    70% { transform: translateY(-8px) scale(1.1); }
}

/* 布丁光泽流动 */
.main-entry {
    background-size: 100% 200%;
    transition: background-position 0.5s;
}
.entry-bookshelf {
    background: linear-gradient(180deg, #E9D5FF 0%, #D8B4FE 50%, #C084FC 100%);
}
.entry-practice {
    background: linear-gradient(180deg, #FFE8CC 0%, #FDBA74 50%, #FB923C 100%);
}
.entry-print {
    background: linear-gradient(180deg, #BAE6FD 0%, #7DD3FC 50%, #38BDF8 100%);
}

/* 布丁文字白色 */
.entry-title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.entry-desc {
    color: rgba(255,255,255,0.85) !important;
}

/* 布丁悬停时整体发光 */
.main-entry:hover {
    box-shadow: 
        0 15px 40px rgba(0,0,0,0.15),
        0 0 30px rgba(255,255,255,0.3) inset,
        0 -5px 15px rgba(255,255,255,0.2) inset;
}

/* 布丁点击效果 */
.main-entry:active {
    transform: scale(0.92, 1.08);
    transition: transform 0.1s;
}

/* 欢迎图标布丁化 */
.welcome-icon {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
}

/* 移动端布丁效果保持 */
@media (max-width: 768px) {
    .main-entry {
        border-radius: 20px;
    }
    .main-entry::before {
        top: 5px;
        height: 12px;
    }
}

/* 城堡背景 */
.home-page {
    background: url('/static/img/castle_bg.jpg') center center / cover no-repeat fixed !important;
    position: relative;
}
.home-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.5) 100%);
    z-index: 0;
    pointer-events: none;
}
.home-container {
    position: relative;
    z-index: 1;
}

/* 布丁只留图标 - 调整大小 */
.main-entry {
    min-width: 120px;
    max-width: 150px;
    padding: 35px 20px;
    justify-content: center;
}
.entry-icon {
    font-size: 60px;
}

/* 欢迎图标调整 */
.home-welcome {
    margin-bottom: 3vh;
}
.welcome-icon-group {
    gap: 20px;
}
.welcome-icon {
    font-size: 35px;
}
.welcome-icon.w2 {
    font-size: 45px;
}

/* 隐藏装饰元素避免和城堡背景冲突 */
.bg-decor {
    display: none;
}

/* 移动端城堡背景 */
@media (max-width: 768px) {
    .home-page {
        background-attachment: scroll !important;
    }
    .main-entry {
        min-width: 100px;
        max-width: 120px;
        padding: 25px 15px;
    }
    .entry-icon {
        font-size: 45px;
    }
    .home-main-entries {
        flex-direction: row;
        gap: 15px;
    }
}

/* 横屏城堡背景 */
@media (max-width: 900px) and (orientation: landscape) {
    .main-entry {
        min-width: 90px;
        max-width: 110px;
        padding: 20px 12px;
    }
    .entry-icon {
        font-size: 38px;
    }
    .home-welcome {
        margin-bottom: 1vh;
    }
    .welcome-icon {
        font-size: 25px;
    }
    .welcome-icon.w2 {
        font-size: 32px;
    }
}

/* 布丁按钮更透明 - 玻璃效果 */
.main-entry {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 3D旋转效果 */
.main-entry {
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: rotate3D 8s ease-in-out infinite;
}
.main-entry:nth-child(2) { animation-delay: 0.5s; }
.main-entry:nth-child(3) { animation-delay: 1s; }

@keyframes rotate3D {
    0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
    25% { transform: rotateY(8deg) rotateX(3deg); }
    50% { transform: rotateY(0deg) rotateX(0deg); }
    75% { transform: rotateY(-8deg) rotateX(-3deg); }
}

/* 悬停时暂停旋转，放大 */
.main-entry:hover {
    animation-play-state: paused;
    transform: rotateY(0deg) rotateX(0deg) scale(1.1) !important;
}

/* 图标3D效果 */
.entry-icon {
    transform: translateZ(20px);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* 顶部高光更透明 */
.main-entry::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
}

/* 底部阴影更淡 */
.main-entry::after {
    background: radial-gradient(ellipse, rgba(0,0,0,0.1), transparent 70%);
}

/* 欢迎图标3D旋转 */
.welcome-icon {
    display: inline-block;
    animation: iconRotate3D 4s ease-in-out infinite;
}
.welcome-icon.w1 { animation-delay: 0s; }
.welcome-icon.w2 { animation-delay: 0.3s; }
.welcome-icon.w3 { animation-delay: 0.6s; }

@keyframes iconRotate3D {
    0%, 100% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.1); }
}

/* 城堡背景更柔和 */
.home-page::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.35) 100%);
}

/* 移动端3D效果保持 */
@media (max-width: 768px) {
    .main-entry {
        animation: rotate3DMobile 6s ease-in-out infinite;
    }
    @keyframes rotate3DMobile {
        0%, 100% { transform: rotateY(0deg); }
        50% { transform: rotateY(5deg); }
    }
}

/* 图片图标样式 */
.entry-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateZ(20px);
}

/* 悬停时图标弹跳 */
.main-entry:hover .entry-icon-img {
    animation: imgBounce 0.6s ease-in-out;
}
@keyframes imgBounce {
    0%, 100% { transform: translateZ(20px) scale(1); }
    30% { transform: translateZ(30px) scale(1.15); }
    50% { transform: translateZ(20px) scale(0.95); }
    70% { transform: translateZ(25px) scale(1.08); }
}

/* 按钮更透明，突出图标 */
.main-entry {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    padding: 25px 20px;
}

/* 去掉顶部高光和底部阴影，因为图标自带 */
.main-entry::before {
    display: none;
}
.main-entry::after {
    display: none;
}

/* 移动端图标大小 */
@media (max-width: 768px) {
    .entry-icon-img {
        width: 60px;
        height: 60px;
    }
    .main-entry {
        padding: 18px 15px;
        min-width: 90px;
        max-width: 110px;
    }
}

/* 横屏图标大小 */
@media (max-width: 900px) and (orientation: landscape) {
    .entry-icon-img {
        width: 50px;
        height: 50px;
    }
    .main-entry {
        padding: 15px 12px;
        min-width: 80px;
        max-width: 100px;
    }
}

/* 3D卡片轮播 */
.card-carousel {
    width: 100%;
    max-width: 500px;
    height: 200px;
    position: relative;
    perspective: 1000px;
    margin: 2vh auto;
}
.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}
.carousel-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 160px;
    margin-left: -70px;
    margin-top: -80px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

/* 中间卡片 - 激活状态 */
.carousel-card.card-active {
    transform: translateX(0) translateZ(80px) scale(1.1);
    z-index: 3;
    opacity: 1;
}

/* 左侧卡片 */
.carousel-card.card-prev {
    transform: translateX(-130px) translateZ(0) rotateY(25deg) scale(0.85);
    z-index: 2;
    opacity: 0.7;
}

/* 右侧卡片 */
.carousel-card.card-next {
    transform: translateX(130px) translateZ(0) rotateY(-25deg) scale(0.85);
    z-index: 2;
    opacity: 0.7;
}

/* 卡片图标 */
.carousel-card .entry-icon-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* 卡片标签 */
.card-label {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.15);
    padding: 3px 12px;
    border-radius: 12px;
}

/* 轮播指示器 */
.carousel-dots {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
}
.carousel-dots .dot.active {
    background: #fff;
    width: 25px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* 悬停效果 */
.carousel-card:hover {
    filter: brightness(1.1);
}
.carousel-card.card-active:hover {
    transform: translateX(0) translateZ(100px) scale(1.15);
}

/* 移动端轮播 */
@media (max-width: 768px) {
    .card-carousel {
        height: 180px;
        max-width: 350px;
    }
    .carousel-card {
        width: 110px;
        height: 130px;
        margin-left: -55px;
        margin-top: -65px;
    }
    .carousel-card .entry-icon-img {
        width: 55px;
        height: 55px;
    }
    .card-label {
        font-size: 12px;
        padding: 2px 8px;
    }
    .carousel-card.card-prev {
        transform: translateX(-95px) translateZ(0) rotateY(25deg) scale(0.8);
    }
    .carousel-card.card-next {
        transform: translateX(95px) translateZ(0) rotateY(-25deg) scale(0.8);
    }
}

/* 横屏轮播 */
@media (max-width: 900px) and (orientation: landscape) {
    .card-carousel {
        height: 140px;
        max-width: 400px;
    }
    .carousel-card {
        width: 100px;
        height: 110px;
        margin-left: -50px;
        margin-top: -55px;
    }
    .carousel-card .entry-icon-img {
        width: 45px;
        height: 45px;
    }
    .card-label {
        font-size: 11px;
        padding: 2px 8px;
    }
    .carousel-card.card-prev {
        transform: translateX(-85px) translateZ(0) rotateY(25deg) scale(0.8);
    }
    .carousel-card.card-next {
        transform: translateX(85px) translateZ(0) rotateY(-25deg) scale(0.8);
    }
}

/* 洪恩识字风格首页 */

/* 顶部标题 */
.home-top-title {
    text-align: center;
    margin-bottom: 2vh;
    position: relative;
}
.title-bg {
    display: inline-block;
    background: #fff;
    border-radius: 30px;
    padding: 10px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    position: relative;
}
.title-text {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #FF6B6B, #FFE66D, #4ECDC4, #A29BFE);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowShift 3s linear infinite;
}
.title-star {
    position: absolute;
    top: -10px;
    right: -20px;
    font-size: 25px;
    animation: starTwinkle 1.5s ease-in-out infinite;
}

/* 三大3D卡通入口 */
.home-3d-entries {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}
.entry-3d {
    flex: 1;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.entry-3d:hover {
    transform: translateY(-15px) scale(1.05);
}
.entry-3d-img {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: entryFloat 3s ease-in-out infinite;
}
.entry-3d-2 .entry-3d-img { animation-delay: 0.5s; }
.entry-3d-3 .entry-3d-img { animation-delay: 1s; }
.entry-3d-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}
.entry-3d-label {
    margin-top: -10px;
    background: #fff;
    border-radius: 20px;
    padding: 8px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 2;
}
.entry-3d-label span {
    font-size: 18px;
    font-weight: 800;
    color: #333;
}
.entry-3d-1 .entry-3d-label { background: linear-gradient(135deg, #E9D5FF, #C084FC); }
.entry-3d-1 .entry-3d-label span { color: #6B21A8; }
.entry-3d-2 .entry-3d-label { background: linear-gradient(135deg, #FFE8CC, #FDBA74); }
.entry-3d-2 .entry-3d-label span { color: #9A3412; }
.entry-3d-3 .entry-3d-label { background: linear-gradient(135deg, #BAE6FD, #38BDF8); }
.entry-3d-3 .entry-3d-label span { color: #075985; }

/* 入口浮动动画 */
@keyframes entryFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 底部装饰 */
.home-bottom-deco {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 2vh;
}
.deco-cloud {
    font-size: 30px;
    animation: cloudFloat 4s ease-in-out infinite;
}
.deco-cloud:last-child { animation-delay: 1s; }
.deco-star {
    font-size: 25px;
    animation: starTwinkle 1.5s ease-in-out infinite;
}
@keyframes cloudFloat {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

/* 隐藏旧的欢迎区和轮播样式影响 */
.home-welcome, .card-carousel {
    display: none !important;
}

/* 移动端洪恩风格 */
@media (max-width: 768px) {
    .title-text { font-size: 22px; }
    .title-bg { padding: 8px 25px; }
    .home-3d-entries {
        gap: 10px;
        padding: 10px;
    }
    .entry-3d { max-width: 150px; }
    .entry-3d-label { padding: 5px 15px; }
    .entry-3d-label span { font-size: 14px; }
    .deco-cloud { font-size: 20px; }
    .deco-star { font-size: 18px; }
}

/* 横屏洪恩风格 */
@media (max-width: 900px) and (orientation: landscape) {
    .home-top-title { margin-bottom: 1vh; }
    .title-text { font-size: 20px; }
    .title-bg { padding: 6px 25px; }
    .home-3d-entries {
        gap: 15px;
        max-width: 600px;
    }
    .entry-3d { max-width: 160px; }
    .entry-3d-label { padding: 4px 12px; margin-top: -5px; }
    .entry-3d-label span { font-size: 13px; }
    .home-bottom-deco { display: none; }
}

/* 去掉白色背景，融合户外场景 */

/* 标题去掉白色背景 */
.title-bg {
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 20px !important;
}
.title-text {
    font-size: 42px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 
        0 3px 0 #FF6B6B,
        0 6px 10px rgba(0,0,0,0.2),
        0 0 20px rgba(255,255,255,0.5) !important;
    -webkit-text-stroke: 2px #FF6B6B;
    paint-order: stroke fill;
}

/* 入口标签去掉白色背景 */
.entry-3d-label {
    background: transparent !important;
    box-shadow: none !important;
    padding: 5px 15px !important;
}
.entry-3d-label span {
    font-size: 22px !important;
    color: #fff !important;
    text-shadow: 
        0 2px 0 rgba(0,0,0,0.2),
        0 4px 8px rgba(0,0,0,0.15) !important;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.15);
    paint-order: stroke fill;
}

/* 不同入口标签颜色 */
.entry-3d-1 .entry-3d-label span {
    color: #fff !important;
    -webkit-text-stroke: 2px #7C3AED;
}
.entry-3d-2 .entry-3d-label span {
    color: #fff !important;
    -webkit-text-stroke: 2px #EA580C;
}
.entry-3d-3 .entry-3d-label span {
    color: #fff !important;
    -webkit-text-stroke: 2px #0284C7;
}

/* 背景遮罩调淡，让场景更清晰 */
.home-page::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.1) 100%) !important;
}

/* 入口图片更突出 */
.entry-3d-img img {
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2)) !important;
}

/* 底部装饰更明显 */
.deco-cloud {
    font-size: 40px !important;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
}
.deco-star {
    font-size: 30px !important;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
}

/* 移动端调整 */
@media (max-width: 768px) {
    .title-text {
        font-size: 28px !important;
        -webkit-text-stroke: 1.5px #FF6B6B !important;
    }
    .entry-3d-label span {
        font-size: 16px !important;
    }
    .deco-cloud { font-size: 25px !important; }
    .deco-star { font-size: 20px !important; }
}

/* 横屏调整 */
@media (max-width: 900px) and (orientation: landscape) {
    .title-text {
        font-size: 24px !important;
        -webkit-text-stroke: 1.5px #FF6B6B !important;
    }
    .entry-3d-label span {
        font-size: 14px !important;
    }
}

/* 强制去掉所有白色背景 */

/* 入口容器透明 */
.entry-3d,
.entry-3d-img,
.entry-3d-label {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3D图片去掉白底 - 使用混合模式 */
.entry-3d-img img {
    background: transparent !important;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
}

/* 标题容器透明 */
.home-top-title,
.title-bg {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 底部装饰透明 */
.home-bottom-deco {
    background: transparent !important;
}

/* 主容器透明 */
.home-container,
.container {
    background: transparent !important;
    background-color: transparent !important;
}

/* 页面背景 */
.home-page {
    background: transparent !important;
}

/* 检查是否有其他白色背景 */
.home-3d-entries {
    background: transparent !important;
}

/* 如果图片白底还是明显，给图片加圆角蒙版 */
.entry-3d-img {
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
}

/* 修复：恢复背景图，只去掉卡片白底 */

/* 恢复页面背景图 */
.home-page {
    background: url('/static/img/castle_bg.jpg') center center / cover no-repeat fixed !important;
}
.home-page::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.15) 100%) !important;
}

/* 入口容器透明 */
.entry-3d,
.entry-3d-label {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3D图片容器 - 不用mix-blend-mode，改用圆角和阴影 */
.entry-3d-img {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* 3D图片 - 去掉白底的更好方式：用滤镜 */
.entry-3d-img img {
    background: transparent !important;
    mix-blend-mode: normal !important;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
}

/* 标题容器透明 */
.title-bg {
    background: transparent !important;
    box-shadow: none !important;
}

/* 主容器透明 */
.home-container,
.container,
.home-3d-entries,
.home-bottom-deco,
.home-top-title {
    background: transparent !important;
}

/* ===== 3D幻灯片轮播 ===== */
.home-carousel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 380px;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.carousel-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 340px;
    margin-left: -140px;
    margin-top: -170px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transform-style: preserve-3d;
}

.carousel-slide .slide-img {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.carousel-slide .slide-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.carousel-slide .slide-label {
    text-align: center;
    margin-top: 10px;
}

.carousel-slide .slide-label span {
    display: inline-block;
    padding: 8px 28px;
    background: rgba(255,255,255,0.9);
    border-radius: 25px;
    font-size: 20px;
    font-weight: bold;
    color: #5F27CD;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 中间激活状态 */
.carousel-slide.active {
    transform: translateX(0) translateZ(100px) scale(1.1);
    z-index: 10;
    opacity: 1;
}

.carousel-slide.active .slide-label span {
    background: linear-gradient(135deg, #FF9F43, #FF6B35);
    color: #fff;
    transform: scale(1.1);
}

/* 左侧 */
.carousel-slide.prev {
    transform: translateX(-220px) translateZ(-50px) rotateY(25deg) scale(0.8);
    z-index: 5;
    opacity: 0.7;
}

/* 右侧 */
.carousel-slide.next {
    transform: translateX(220px) translateZ(-50px) rotateY(-25deg) scale(0.8);
    z-index: 5;
    opacity: 0.7;
}

/* 远侧隐藏 */
.carousel-slide.far-prev,
.carousel-slide.far-next {
    transform: translateX(0) translateZ(-200px) scale(0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* 导航按钮 */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #5F27CD;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, #FF9F43, #FF6B35);
    color: #fff;
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: 10px;
}

.carousel-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dots .dot.active {
    width: 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, #FF9F43, #FF6B35);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .carousel-container {
        height: 300px;
    }
    .carousel-slide {
        width: 200px;
        height: 260px;
        margin-left: -100px;
        margin-top: -130px;
    }
    .carousel-slide .slide-img {
        height: 200px;
    }
    .carousel-slide.active {
        transform: translateX(0) translateZ(50px) scale(1.05);
    }
    .carousel-slide.prev {
        transform: translateX(-150px) translateZ(-30px) rotateY(25deg) scale(0.75);
    }
    .carousel-slide.next {
        transform: translateX(150px) translateZ(-30px) rotateY(-25deg) scale(0.75);
    }
    .carousel-slide .slide-label span {
        font-size: 16px;
        padding: 6px 20px;
    }
}

/* ===== 3D轮播尺寸调整（更小） ===== */
.carousel-container {
    height: 300px !important;
}
.carousel-slide {
    width: 200px !important;
    height: 260px !important;
    margin-left: -100px !important;
    margin-top: -130px !important;
}
.carousel-slide .slide-img {
    height: 200px !important;
}
.carousel-slide.active {
    transform: translateX(0) translateZ(60px) scale(1) !important;
}
.carousel-slide.prev {
    transform: translateX(-160px) translateZ(-30px) rotateY(25deg) scale(0.75) !important;
}
.carousel-slide.next {
    transform: translateX(160px) translateZ(-30px) rotateY(-25deg) scale(0.75) !important;
}
.carousel-slide .slide-label span {
    font-size: 16px !important;
    padding: 6px 20px !important;
}
.carousel-nav {
    margin-top: 5px !important;
}
.carousel-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
}
@media (max-width: 768px) {
    .carousel-container {
        height: 240px !important;
    }
    .carousel-slide {
        width: 150px !important;
        height: 200px !important;
        margin-left: -75px !important;
        margin-top: -100px !important;
    }
    .carousel-slide .slide-img {
        height: 150px !important;
    }
    .carousel-slide.active {
        transform: translateX(0) translateZ(30px) scale(0.95) !important;
    }
    .carousel-slide.prev {
        transform: translateX(-110px) translateZ(-20px) rotateY(25deg) scale(0.7) !important;
    }
    .carousel-slide.next {
        transform: translateX(110px) translateZ(-20px) rotateY(-25deg) scale(0.7) !important;
    }
    .carousel-slide .slide-label span {
        font-size: 14px !important;
        padding: 5px 16px !important;
    }
}

/* ===== 首页四大模块布局 ===== */
.home-modules {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    padding: 10px 20px;
}

.module-card {
    display: flex;
    flex-direction: column;
    padding: 20px 18px 16px;
    border-radius: 22px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 170px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

.module-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

.module-card::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
}

.module-card::before {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -40px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}

/* 模块配色 */
.module-kids    { background: linear-gradient(135deg, #FFB6C8, #FF8FAB); }
.module-bridge  { background: linear-gradient(135deg, #FFD9A3, #FFB86B); }
.module-school  { background: linear-gradient(135deg, #A8D8F0, #74B9FF); }
.module-reading { background: linear-gradient(135deg, #BFE8C9, #7FD8A4); }

.module-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
}

.module-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.module-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.18);
    letter-spacing: 2px;
}

.module-age {
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.25);
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.module-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.92);
    margin-top: 8px;
    font-weight: 500;
}

.module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    position: relative;
    z-index: 2;
}

.mtag {
    font-size: 11px;
    color: #fff;
    background: rgba(255,255,255,0.28);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.mtag-soon {
    background: rgba(0,0,0,0.14);
    font-weight: 500;
}

/* 底部快捷工具 */
.home-tools {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 22px auto 0;
    flex-wrap: wrap;
    padding: 0 20px;
}

.tool-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 24px;
    text-decoration: none;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1.5px solid rgba(255,255,255,0.7);
}

.tool-btn:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.85);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.tool-ico { font-size: 20px; }
.tool-txt {
    font-size: 14px;
    font-weight: 700;
    color: #5F27CD;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .home-modules {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 8px 14px;
    }
    .module-card {
        padding: 16px 14px 12px;
        min-height: 140px;
        border-radius: 18px;
    }
    .module-icon { font-size: 34px; margin-bottom: 8px; }
    .module-name { font-size: 18px; letter-spacing: 1px; }
    .module-age { font-size: 10px; padding: 2px 8px; }
    .module-desc { font-size: 11px; margin-top: 6px; }
    .module-tags { margin-top: 8px; gap: 4px; }
    .mtag { font-size: 10px; padding: 3px 8px; }
    .home-tools { gap: 10px; margin-top: 16px; }
    .tool-btn { padding: 8px 16px; }
    .tool-ico { font-size: 18px; }
    .tool-txt { font-size: 12px; }
}

@media (max-width: 480px) {
    .home-modules { gap: 8px; padding: 6px 10px; }
    .module-card { min-height: 120px; padding: 12px 10px 10px; }
    .module-icon { font-size: 28px; margin-bottom: 6px; }
    .module-name { font-size: 15px; }
    .module-age { font-size: 9px; }
    .module-desc { font-size: 10px; }
    .mtag { font-size: 9px; padding: 2px 6px; }
}

/* 思维训练 / 练字板配色 */
.module-brain    { background: linear-gradient(135deg, #C9A7E8, #A78BFA); }
.module-practice { background: linear-gradient(135deg, #9AD8E0, #5FD0D8); }

/* 筹备中点击提示 */
.module-soon-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(255,255,255,0.96);
    border-radius: 20px;
    padding: 28px 40px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.module-soon-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.module-soon-toast .toast-ico { font-size: 48px; margin-bottom: 10px; }
.module-soon-toast .toast-txt { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 6px; }
.module-soon-toast .toast-sub { font-size: 13px; color: #999; }

/* ===== 首页全屏一屏适配（覆盖旧规则） ===== */
body.home-page {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.8vh, 24px);
    padding: clamp(12px, 3vh, 32px) 20px;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* 六大模块网格：自适应所有屏幕，一屏放完 */
.home-modules {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(10px, 1.6vh, 20px);
    padding: 0;
    flex: 1 1 auto;
    align-content: center;
}

/* 竖屏（窄屏）手机：3列2行 */
@media (orientation: portrait) and (max-width: 600px) {
    .home-modules {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 100%;
    }
    .module-card { padding: 10px 8px; min-height: 0; border-radius: 14px; }
    .module-icon { font-size: 24px; margin-bottom: 4px; }
    .module-name { font-size: 13px; letter-spacing: 0; }
    .module-age { font-size: 9px; padding: 1px 6px; }
    .module-desc { font-size: 10px; margin-top: 3px; line-height: 1.3; }
    .module-tags { margin-top: 5px; gap: 3px; }
    .mtag { font-size: 8px; padding: 2px 5px; }
    .module-desc { display: none; }
}

/* 横屏手机 / 小平板 */
@media (orientation: landscape) and (max-height: 500px) {
    .home-modules {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        max-width: 98%;
    }
    .module-card { padding: 12px 10px; min-height: 0; border-radius: 16px; }
    .module-icon { font-size: 28px; margin-bottom: 6px; }
    .module-name { font-size: 15px; letter-spacing: 1px; }
    .module-age { font-size: 9px; padding: 1px 7px; }
    .module-desc { font-size: 11px; margin-top: 4px; }
    .module-tags { margin-top: 7px; gap: 4px; }
    .mtag { font-size: 9px; padding: 3px 7px; }
}

/* 常规横屏平板 / 桌面 */
@media (orientation: landscape) and (min-height: 501px) {
    .home-modules {
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
    }
    .module-card { min-height: 0; padding: 16px 12px; }
}

/* 超小竖屏 */
@media (orientation: portrait) and (max-width: 380px) {
    .home-modules { gap: 6px; }
    .module-icon { font-size: 20px; }
    .module-name { font-size: 11px; }
    .mtag { display: none; }
    .module-age { display: none; }
}

/* 右上角按钮 */
.home-top-right {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 12px));
    right: max(14px, env(safe-area-inset-right, 14px));
    display: flex;
    gap: 10px;
    z-index: 999;
}

.top-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
    padding: 0;
}

.top-icon-btn:hover {
    transform: scale(1.1) rotate(-6deg);
    background: rgba(255,255,255,0.75);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.top-icon-btn svg { display: block; }

/* 隐藏底部装饰（一屏显示不再需要） */
.home-bottom-deco {
    display: none !important;
}

/* ===== 新增卡通装饰元素 ===== */
/* 更多气球 */
.balloon-3 {
    top: 60%;
    right: 2%;
    font-size: 32px;
    animation: balloonFloat 5.5s ease-in-out infinite;
    animation-delay: 2s;
}

/* 更多小动物 */
.animal-4 {
    bottom: 5%;
    left: 25%;
    font-size: 34px;
    animation: animalBounce 3.8s ease-in-out infinite;
    animation-delay: 1.5s;
}
.animal-5 {
    bottom: 30%;
    right: 12%;
    font-size: 30px;
    animation: animalBounce 4.2s ease-in-out infinite;
    animation-delay: 0.8s;
}
.animal-6 {
    top: 30%;
    left: 7%;
    font-size: 32px;
    animation: animalBounce 3.2s ease-in-out infinite;
    animation-delay: 2.2s;
}

/* 更多花朵 */
.flower-3 {
    bottom: 6%;
    left: 42%;
    font-size: 26px;
    animation: flowerSway 4.5s ease-in-out infinite;
    animation-delay: 1.2s;
}
.flower-4 {
    bottom: 12%;
    right: 32%;
    font-size: 28px;
    animation: flowerSway 3.8s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* 蝴蝶 */
.butterfly-1 {
    top: 12%;
    left: 12%;
    font-size: 26px;
    animation: butterflyFly 7s ease-in-out infinite;
}
.butterfly-2 {
    top: 45%;
    right: 20%;
    font-size: 24px;
    animation: butterflyFly 8s ease-in-out infinite;
    animation-delay: 2s;
}
@keyframes butterflyFly {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    25% { transform: translate(20px, -18px) rotate(10deg); }
    50% { transform: translate(-10px, -30px) rotate(-5deg); }
    75% { transform: translate(-25px, -10px) rotate(8deg); }
}

/* 第二个彩虹 */
.rainbow-2 {
    top: 3%;
    left: 30%;
    font-size: 30px;
    animation: rainbowFloat 5s ease-in-out infinite;
    animation-delay: 1s;
}

/* 星星月亮太阳 */
.star-5 {
    top: 18%;
    right: 25%;
    font-size: 22px;
    animation: starTwinkle 2.5s ease-in-out infinite;
}
.star-6 {
    bottom: 40%;
    left: 20%;
    font-size: 20px;
    animation: starTwinkle 3s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes starTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.4) rotate(20deg); opacity: 1; }
}
.moon {
    top: 8%;
    right: 18%;
    font-size: 30px;
    animation: moonFloat 6s ease-in-out infinite;
}
@keyframes moonFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-12px) rotate(8deg); }
}
.sun {
    top: 5%;
    left: 5%;
    font-size: 36px;
    animation: sunSpin 10s linear infinite;
}
@keyframes sunSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 冰淇淋糖果火箭铅笔 */
.icecream {
    bottom: 20%;
    left: 15%;
    font-size: 26px;
    animation: balloonFloat 4.5s ease-in-out infinite;
    animation-delay: 0.6s;
}
.candy {
    top: 65%;
    left: 3%;
    font-size: 24px;
    animation: balloonFloat 5s ease-in-out infinite;
    animation-delay: 1.8s;
}
.rocket {
    bottom: 25%;
    right: 6%;
    font-size: 32px;
    animation: rocketFly 6s ease-in-out infinite;
}
@keyframes rocketFly {
    0%, 100% { transform: translateY(0) rotate(-15deg); }
    50% { transform: translateY(-22px) rotate(15deg); }
}
.pencil {
    top: 22%;
    left: 22%;
    font-size: 28px;
    animation: pencilWiggle 3s ease-in-out infinite;
}
@keyframes pencilWiggle {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(12deg); }
}

/* 小屏适当隐藏部分装饰 */
@media (orientation: portrait) and (max-width: 600px) {
    .animal-4, .animal-5, .butterfly-2, .rainbow-2, .candy, .icecream, .pencil, .star-6 {
        display: none;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .animal-4, .animal-5, .animal-6, .butterfly-1, .butterfly-2, .icecream, .candy, .moon {
        display: none;
    }
}

/* ===== 全局按下效果（click-sound.js 配合） ===== */
.fx-pressed {
    transform: scale(0.94) !important;
    filter: brightness(0.92) !important;
    transition: transform 0.08s ease !important;
}
.fx-pressed.module-card {
    transform: translateY(0) scale(0.94) !important;
}