/* 🌈 ============================================
   成长树系统 - 卡通轻松响应式样式
   🌟 色彩饱满 · 卡通可爱 · 轻松愉快
   🎨 设计理念：让学习像游戏一样有趣！
   📱 全设备适配：从大屏幕到小手机
   🚀 版本：1.0 · 糖果乐园主题
============================================ 🌈 */

/* 🍭 -------------------------------------------------
   基础设置 - 糖果乐园风格
------------------------------------------------- 🍬 */
* {
    box-sizing: border-box;
    font-family: "Comic Sans MS", "微软雅黑", "Arial Rounded MT Bold", sans-serif;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* 让图片和视频可爱一点 */
img, video {
    max-width: 100%;
    height: auto;
    border-radius: 20px !important;
}

/* 🎪 -------------------------------------------------
   超大游乐场屏幕 (≥1400px)
   适合：大电视、4K显示器
------------------------------------------------- 🎡 */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1400px;
        padding: 0 40px !important;
    }
    
    /* 超大标题 - 像游乐园招牌 */
    .main-title h1 {
        font-size: 4.8rem !important;
        font-weight: 900 !important;
        background: linear-gradient(45deg, 
            #FF6B8B 0%, 
            #FF8E53 25%, 
            #00C9FF 50%, 
            #92FE9D 75%, 
            #FF6B8B 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        text-shadow: 5px 5px 0 rgba(255, 107, 139, 0.2) !important;
        animation: rainbowText 8s linear infinite !important;
    }
    
    .main-title p {
        font-size: 2rem !important;
        color: #5D6AFB !important;
        font-weight: 600 !important;
        text-shadow: 2px 2px 0 #FFE66D !important;
    }
    
    /* 超大卡片 - 像卡通房子 */
    .card {
        border-radius: 35px !important;
        border: 8px solid white !important;
        box-shadow: 
            0 20px 40px rgba(255, 107, 139, 0.3),
            0 0 0 10px #FFE66D,
            0 0 0 15px #00C9FF !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }
    
    .card:hover {
        transform: 
            translateY(-20px) 
            rotate(2deg) 
            scale(1.05) !important;
        box-shadow: 
            0 30px 60px rgba(255, 107, 139, 0.5),
            0 0 0 12px #FFE66D,
            0 0 0 20px #00C9FF,
            0 0 50px rgba(0, 201, 255, 0.3) !important;
    }
    
    /* 超大按钮 - 像游戏按钮 */
    .btn {
        padding: 25px 50px !important;
        font-size: 1.8rem !important;
        border-radius: 60px !important;
        border: 6px solid white !important;
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        box-shadow: 
            0 10px 0 #FF4757,
            0 20px 30px rgba(255, 107, 139, 0.4) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .btn:hover {
        transform: translateY(-8px) !important;
        box-shadow: 
            0 18px 0 #FF4757,
            0 30px 50px rgba(255, 107, 139, 0.6) !important;
    }
    
    .btn:active {
        transform: translateY(-2px) !important;
        box-shadow: 
            0 8px 0 #FF4757,
            0 15px 30px rgba(255, 107, 139, 0.4) !important;
    }
    
    .btn::after {
        content: '✨';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
        animation: sparkle 2s infinite;
    }
    
    /* 底部导航 - 像彩虹桥 */
    .navbar-footer {
        border-radius: 50px 50px 0 0 !important;
        background: linear-gradient(90deg,
            #FF6B8B 0%,
            #FF8E53 20%,
            #FFE66D 40%,
            #92FE9D 60%,
            #00C9FF 80%,
            #5D6AFB 100%) !important;
        padding: 25px 0 !important;
        border: 8px solid white !important;
        border-bottom: none !important;
    }
    
    .navbar-footer .nav-link {
        font-size: 1.4rem !important;
        color: white !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) !important;
        margin: 0 25px !important;
        padding: 15px 30px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 30px !important;
        border: 3px solid white !important;
        transition: all 0.3s ease !important;
    }
    
    .navbar-footer .nav-link:hover {
        background: rgba(255, 255, 255, 0.4) !important;
        transform: translateY(-5px) scale(1.1) !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* 登录卡片 - 像糖果屋 */
    .login-card {
        border-radius: 50px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 240, 245, 0.95) 100%) !important;
        border: 12px solid #FF6B8B !important;
        box-shadow: 
            0 30px 60px rgba(255, 107, 139, 0.4),
            inset 0 0 0 8px #FFE66D,
            inset 0 0 0 16px #00C9FF !important;
    }
    
    .login-title {
        font-size: 3.5rem !important;
        background: linear-gradient(45deg, 
            #FF6B8B 0%, 
            #FF8E53 50%, 
            #00C9FF 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        position: relative !important;
        display: inline-block !important;
    }
    
    .login-title::after {
        content: '🎯';
        position: absolute;
        right: -50px;
        top: 0;
        font-size: 3rem;
        animation: bounce 1s infinite alternate;
    }
    
    /* 输入框 - 像云朵 */
    .form-control {
        border-radius: 25px !important;
        border: 5px solid #00C9FF !important;
        background: linear-gradient(135deg, 
            #E3F2FD 0%, 
            #FFF3E0 100%) !important;
        font-size: 1.4rem !important;
        padding: 20px 30px !important;
        box-shadow: 
            inset 0 0 20px rgba(0, 201, 255, 0.2),
            0 8px 16px rgba(0, 201, 255, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .form-control:focus {
        transform: scale(1.05) !important;
        border-color: #FF6B8B !important;
        box-shadow: 
            inset 0 0 30px rgba(255, 107, 139, 0.3),
            0 12px 24px rgba(255, 107, 139, 0.4),
            0 0 0 5px #FFE66D !important;
    }
    
    /* 图表容器 - 像游戏分数板 */
    .chart-box {
        height: 350px !important;
        background: linear-gradient(135deg, 
            rgba(147, 249, 185, 0.1) 0%,
            rgba(93, 106, 251, 0.1) 100%) !important;
        border-radius: 30px !important;
        border: 6px solid #92FE9D !important;
        box-shadow: 
            inset 0 0 30px rgba(146, 254, 157, 0.3),
            0 15px 30px rgba(146, 254, 157, 0.2) !important;
    }
}

/* 🎠 -------------------------------------------------
   大游乐场屏幕 (1200px-1399px)
   适合：台式机、大笔记本
------------------------------------------------- 🎢 */
@media (max-width: 1399.98px) and (min-width: 1200px) {
    /* 添加标题间距 */
    .main-title {
        margin: 90px 0 45px 0 !important;
    }
    
    /* 添加容器间距 */
    .container-fluid {
        max-width: 1200px;
        padding: 0 30px !important;
        margin: 45px auto 0 !important;
    }
    
    .main-title h1 {
        font-size: 4rem !important;
        background: linear-gradient(45deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        text-shadow: 4px 4px 0 rgba(255, 107, 139, 0.2) !important;
    }
    
    .main-title p {
        font-size: 1.8rem !important;
        color: #5D6AFB !important;
        text-shadow: 2px 2px 0 #FFE66D !important;
    }
    
    .card {
        border-radius: 30px !important;
        border: 6px solid white !important;
        box-shadow: 
            0 15px 30px rgba(255, 107, 139, 0.25),
            0 0 0 8px #FFE66D,
            0 0 0 12px #00C9FF !important;
    }
    
    .card:hover {
        transform: translateY(-15px) rotate(1deg) !important;
    }
    
    .btn {
        padding: 20px 40px !important;
        font-size: 1.6rem !important;
        border-radius: 50px !important;
        border: 5px solid white !important;
    }
    
    .login-card {
        border-radius: 40px !important;
        border: 10px solid #FF6B8B !important;
    }
}/* 🏰 -------------------------------------------------
   城堡屏幕 (992px-1199px)
   适合：笔记本、大平板
------------------------------------------------- 🏯 */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .main-title {
        margin: 50px 0 60px !important;
    }
    
    .main-title h1 {
        font-size: 3.5rem !important;
        background: linear-gradient(45deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        animation: rainbowText 6s linear infinite !important;
    }
    
    .main-title p {
        font-size: 1.6rem !important;
        color: #FF8E53 !important;
        font-weight: 600 !important;
    }
    
    .main-title .cartoon-icon {
        font-size: 120px !important;
        color: #FF6B8B !important;
        animation: spin 4s linear infinite !important;
    }
    
    /* 卡片变成可爱云朵 */
    .card {
        border-radius: 25px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 248, 225, 0.9) 100%) !important;
        border: 5px solid white !important;
        box-shadow: 
            0 12px 24px rgba(255, 107, 139, 0.2),
            0 0 0 5px #FFE66D !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, 
            rgba(255, 230, 109, 0.1) 0%,
            rgba(255, 107, 139, 0.05) 50%,
            transparent 70%) !important;
        animation: floatCloud 20s linear infinite !important;
    }
    
    .card-header {
        background: linear-gradient(90deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        color: white !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 5px solid #FFE66D !important;
        font-size: 1.8rem !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) !important;
    }
    
    .card-header i {
        color: #FFE66D !important;
        animation: bounce 1s infinite alternate !important;
    }
    
    /* 按钮变成糖果 */
    .btn {
        padding: 16px 32px !important;
        font-size: 1.4rem !important;
        border-radius: 40px !important;
        border: 4px solid white !important;
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #00C9FF 100%) !important;
        box-shadow: 
            0 8px 0 #FF4757,
            0 15px 20px rgba(255, 107, 139, 0.3) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent) !important;
        transition: left 0.5s !important;
    }
    
    .btn:hover::before {
        left: 100% !important;
    }
    
    .btn:hover {
        transform: translateY(-5px) !important;
        box-shadow: 
            0 13px 0 #FF4757,
            0 20px 30px rgba(255, 107, 139, 0.4) !important;
    }
    
    /* 底部导航变成彩色轨道 */
    .navbar-footer {
        border-radius: 30px 30px 0 0 !important;
        background: linear-gradient(90deg,
            #FF6B8B 0%,
            #FF8E53 33%,
            #00C9FF 66%,
            #5D6AFB 100%) !important;
        padding: 15px 0 !important;
        border: 5px solid white !important;
        border-bottom: none !important;
    }
    
    .navbar-footer .nav-link {
        font-size: 1.1rem !important;
        color: white !important;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
        margin: 0 15px !important;
        padding: 10px 20px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 20px !important;
        border: 2px solid white !important;
    }
    
    .navbar-footer .nav-link i {
        color: #FFE66D !important;
    }
    
    /* 登录页面装饰 */
    .login-card {
        border-radius: 35px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 240, 245, 0.95) 100%) !important;
        border: 8px solid #FF6B8B !important;
        box-shadow: 
            0 20px 40px rgba(255, 107, 139, 0.3),
            inset 0 0 0 5px #FFE66D !important;
    }
    
    .login-title {
        font-size: 2.8rem !important;
        background: linear-gradient(45deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    
    .icon-cartoon i {
        font-size: 90px !important;
        color: #FF6B8B !important;
        animation: float 3s ease-in-out infinite !important;
    }
}

/* 🎪 -------------------------------------------------
   马戏团屏幕 (768px-991px)
   适合：平板横屏、小笔记本
------------------------------------------------- 🤹 */
@media (max-width: 991.98px) and (min-width: 768px) {
    body {
        padding: 15px 0 !important;
        background: linear-gradient(135deg,
            #FFF9C4 0%,
            #FFECB3 50%,
            #FFCCBC 100%) !important;
    }
    
    .main-title {
        margin: 40px 0 50px !important;
    }
    
    .main-title h1 {
        font-size: 3rem !important;
        color: #FF6B8B !important;
        text-shadow: 
            3px 3px 0 #FFE66D,
            6px 6px 0 rgba(255, 107, 139, 0.3) !important;
        animation: wiggle 2s ease-in-out infinite !important;
    }
    
    .main-title p {
        font-size: 1.4rem !important;
        color: #5D6AFB !important;
        font-weight: 600 !important;
    }
    
    /* 卡片变成气球 */
    .card {
        border-radius: 25px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.8) 100%) !important;
        border: 4px solid white !important;
        box-shadow: 
            0 10px 20px rgba(255, 107, 139, 0.2),
            0 0 0 4px #FFE66D,
            0 0 0 8px #00C9FF !important;
        position: relative !important;
    }
    
    .card:hover {
        transform: translateY(-10px) !important;
        animation: floatBalloon 2s ease-in-out infinite !important;
    }
    
    .card-header {
        background: linear-gradient(90deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        color: white !important;
        border-radius: 20px 20px 0 0 !important;
        font-size: 1.6rem !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .card-header::after {
        content: '🎈';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        animation: bounce 1s infinite alternate;
    }
    
    /* 按钮变成泡泡 */
    .btn {
        padding: 14px 28px !important;
        font-size: 1.2rem !important;
        border-radius: 35px !important;
        border: 3px solid white !important;
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #00C9FF 100%) !important;
        box-shadow: 
            0 6px 0 #FF4757,
            0 12px 20px rgba(255, 107, 139, 0.25) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .btn:hover {
        transform: translateY(-4px) !important;
        box-shadow: 
            0 10px 0 #FF4757,
            0 18px 30px rgba(255, 107, 139, 0.35) !important;
        animation: bubblePop 0.3s ease !important;
    }
    
    /* 底部导航变成彩虹条 */
    .navbar-footer {
        border-radius: 25px 25px 0 0 !important;
        background: repeating-linear-gradient(
            45deg,
            #FF6B8B,
            #FF6B8B 20px,
            #FF8E53 20px,
            #FF8E53 40px,
            #FFE66D 40px,
            #FFE66D 60px,
            #00C9FF 60px,
            #00C9FF 80px,
            #5D6AFB 80px,
            #5D6AFB 100px
        ) !important;
        padding: 12px 0 !important;
        border: 4px solid white !important;
        border-bottom: none !important;
        animation: rainbowSlide 10s linear infinite !important;
    }
    
    .navbar-footer .nav-link {
        font-size: 1rem !important;
        color: white !important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
        margin: 0 12px !important;
        padding: 8px 16px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 15px !important;
        border: 2px solid white !important;
    }
    
    /* 登录卡片变成礼物盒 */
    .login-card {
        border-radius: 30px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 248, 225, 0.95) 100%) !important;
        border: 6px solid #FF6B8B !important;
        box-shadow: 
            0 15px 30px rgba(255, 107, 139, 0.25),
            inset 0 0 0 4px #FFE66D !important;
        position: relative !important;
    }
    
    .login-card::before {
        content: '🎁';
        position: absolute;
        top: -30px;
        right: -30px;
        font-size: 3rem;
        animation: spin 4s linear infinite;
        z-index: 10;
    }
    
    .login-title {
        font-size: 2.4rem !important;
        color: #FF6B8B !important;
        text-shadow: 
            2px 2px 0 #FFE66D,
            4px 4px 0 rgba(255, 107, 139, 0.2) !important;
    }
    
    .form-control {
        border-radius: 20px !important;
        border: 3px solid #00C9FF !important;
        background: rgba(255, 255, 255, 0.9) !important;
        font-size: 1.2rem !important;
        padding: 16px 24px !important;
        box-shadow: 
            inset 0 0 15px rgba(0, 201, 255, 0.2),
            0 6px 12px rgba(0, 201, 255, 0.25) !important;
    }
    
    .form-control:focus {
        border-color: #FF6B8B !important;
        box-shadow: 
            inset 0 0 20px rgba(255, 107, 139, 0.3),
            0 8px 16px rgba(255, 107, 139, 0.3),
            0 0 0 3px #FFE66D !important;
    }
}

/* 🍬 -------------------------------------------------
   糖果屏幕 (576px-767px)
   适合：平板竖屏、大手机
------------------------------------------------- 🍭 */
@media (max-width: 767.98px) and (min-width: 576px) {
    body {
        padding: 12px 0 !important;
        background: linear-gradient(135deg,
            #E3F2FD 0%,
            #F3E5F5 50%,
            #FFF3E0 100%) !important;
    }
    
    .main-title {
        margin: 30px 0 40px !important;
    }
    
    .main-title h1 {
        font-size: 2.5rem !important;
        background: linear-gradient(45deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        animation: candyShake 3s ease-in-out infinite !important;
    }
    
    .main-title p {
        font-size: 1.2rem !important;
        color: #5D6AFB !important;
        padding: 10px 20px !important;
        background: rgba(255, 230, 109, 0.3) !important;
        border-radius: 20px !important;
        display: inline-block !important;
        border: 2px dashed #FF6B8B !important;
    }
    
    .main-title .cartoon-icon {
        font-size: 80px !important;
        color: #00C9FF !important;
        animation: bounce 2s infinite !important;
    }
    
    /* 卡片变成棒棒糖 */
    .card {
        border-radius: 25px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 100%) !important;
        border: 3px solid white !important;
        box-shadow: 
            0 8px 16px rgba(255, 107, 139, 0.15),
            0 0 0 3px #FFE66D !important;
        position: relative !important;
    }
    
    .card::after {
        content: '🍭';
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 2rem;
        background: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #FF6B8B;
        animation: spin 4s linear infinite;
    }
    
    .card-header {
        background: linear-gradient(90deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        color: white !important;
        border-radius: 20px 20px 0 0 !important;
        font-size: 1.4rem !important;
        padding: 15px 20px !important;
    }
    
    .card-header i {
        animation: wiggle 1s infinite !important;
    }
    
    /* 按钮变成彩虹糖 */
    .btn {
        padding: 12px 24px !important;
        font-size: 1.1rem !important;
        border-radius: 30px !important;
        border: 3px solid white !important;
        background: repeating-linear-gradient(
            45deg,
            #FF6B8B,
            #FF6B8B 10px,
            #FF8E53 10px,
            #FF8E53 20px,
            #FFE66D 20px,
            #FFE66D 30px,
            #00C9FF 30px,
            #00C9FF 40px
        ) !important;
        background-size: 200% 200% !important;
        animation: rainbowMove 3s linear infinite !important;
        box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1) !important;
    }
    
    .btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at center, 
            rgba(255, 255, 255, 0.3) 0%,
            transparent 70%) !important;
        animation: sparkle 2s infinite !important;
    }
    
    /* 底部导航变成水果糖 */
    .navbar-footer {
        border-radius: 20px 20px 0 0 !important;
        background: linear-gradient(90deg,
            #FF6B8B 0%,
            #FF8E53 50%,
            #00C9FF 100%) !important;
        padding: 10px 0 !important;
        border: 3px solid white !important;
        border-bottom: none !important;
    }
    
    .navbar-footer .nav-link {
        font-size: 0.9rem !important;
        color: white !important;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
        margin: 0 8px !important;
        padding: 6px 12px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 15px !important;
        border: 1px solid white !important;
    }
    
    .navbar-footer .nav-link i {
        animation: bounce 2s infinite !important;
    }
    
    /* 登录页面变成彩虹桥 */
    .login-card {
        border-radius: 25px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 240, 245, 0.95) 100%) !important;
        border: 5px solid #FF6B8B !important;
        box-shadow: 
            0 10px 20px rgba(255, 107, 139, 0.2),
            0 0 0 3px #FFE66D !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .login-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background: linear-gradient(90deg,
            #FF6B8B 0%,
            #FF8E53 20%,
            #FFE66D 40%,
            #92FE9D 60%,
            #00C9FF 80%,
            #5D6AFB 100%) !important;
        animation: rainbowSlide 5s linear infinite !important;
    }
    
    .login-title {
        font-size: 2rem !important;
        color: #FF6B8B !important;
        margin-top: 20px !important;
        position: relative !important;
    }
    
    .login-title::after {
        content: '🌈';
        position: absolute;
        right: -40px;
        top: -10px;
        font-size: 2rem;
        animation: rainbowSpin 4s linear infinite;
    }
    
    .icon-cartoon i {
        font-size: 70px !important;
        color: #FF8E53 !important;
        animation: float 2s ease-in-out infinite !important;
    }
}

/* 🍩 -------------------------------------------------
   甜甜圈屏幕 (≤575px)
   适合：大多数手机
------------------------------------------------- 🍦 */
@media (max-width: 575.98px) {
    body {
        padding: 10px 0 !important;
        background: linear-gradient(135deg,
            #FFEBEE 0%,
            #F3E5F5 50%,
            #E3F2FD 100%) !important;
        animation: bgPulse 10s ease-in-out infinite !important;
    }
    
    /* 移除复杂动画提升性能 */
    .bubble, .seedling {
        display: none !important;
    }
    
    /* 标题变成蹦蹦糖 */
    .main-title {
        margin: 25px 0 30px !important;
    }
    
    .main-title h1 {
        font-size: 2rem !important;
        color: #FF6B8B !important;
        text-shadow: 
            2px 2px 0 #FFE66D,
            4px 4px 0 rgba(255, 107, 139, 0.2) !important;
        animation: jump 2s infinite !important;
        position: relative !important;
        display: inline-block !important;
    }
    
    .main-title h1::before {
        content: '🌟';
        position: absolute;
        left: -30px;
        top: -10px;
        font-size: 1.5rem;
        animation: spin 3s linear infinite;
    }
    
    .main-title h1::after {
        content: '🌟';
        position: absolute;
        right: -30px;
        top: -10px;
        font-size: 1.5rem;
        animation: spin 3s linear infinite reverse;
    }
    
    .main-title p {
        font-size: 1rem !important;
        color: #5D6AFB !important;
        padding: 8px 15px !important;
        background: rgba(255, 230, 109, 0.4) !important;
        border-radius: 15px !important;
        display: inline-block !important;
        border: 2px dotted #FF6B8B !important;
    }
    
    .main-title .cartoon-icon {
        font-size: 60px !important;
        color: #FF6B8B !important;
        animation: heartbeat 1.5s infinite !important;
    }
    
    /* 卡片变成小饼干 */
    .card {
        border-radius: 20px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.9) 100%) !important;
        border: 2px solid white !important;
        box-shadow: 
            0 5px 15px rgba(255, 107, 139, 0.15),
            0 0 0 2px #FFE66D !important;
        position: relative !important;
        margin-bottom: 15px !important;
    }
    
    .card:hover {
        transform: none !important;
    }
    
    .card-header {
        background: linear-gradient(90deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        color: white !important;
        border-radius: 18px 18px 0 0 !important;
        font-size: 1.2rem !important;
        padding: 12px 15px !important;
        text-align: center !important;
    }
    
    .card-header i {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 1.8rem !important;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    /* 按钮变成小星星 */
    .btn {
        padding: 10px 20px !important;
        font-size: 1rem !important;
        border-radius: 25px !important;
        border: 2px solid white !important;
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        box-shadow: 0 4px 0 rgba(255, 71, 87, 0.5) !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 10px auto !important;
        display: block !important;
        position: relative !important;
    }
    
    .btn::after {
        content: '⭐';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
    }
    
    .btn:hover {
        transform: scale(1.05) !important;
    }
    
    /* 底部导航变成彩虹点点 */
    .navbar-footer {
        border-radius: 15px 15px 0 0 !important;
        background: repeating-radial-gradient(
            circle at 10px 10px,
            #FF6B8B,
            #FF6B8B 10px,
            #FF8E53 10px,
            #FF8E53 20px,
            #FFE66D 20px,
            #FFE66D 30px,
            #00C9FF 30px,
            #00C9FF 40px
        ) !important;
        background-size: 40px 40px !important;
        padding: 8px 0 !important;
        border: 2px solid white !important;
        border-bottom: none !important;
        animation: dotsMove 20s linear infinite !important;
    }
    
    .navbar-nav {
        width: 100% !important;
        justify-content: space-around !important;
    }
    
    .navbar-footer .nav-link {
        flex-direction: column !important;
        font-size: 0.75rem !important;
        color: white !important;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3) !important;
        margin: 0 !important;
        padding: 5px 8px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 10px !important;
        border: 1px solid white !important;
        text-align: center !important;
    }
    
    .navbar-footer .nav-link i {
        font-size: 1rem !important;
        margin-bottom: 3px !important;
        color: #FFE66D !important;
    }
    
    /* 登录页面变成魔法书 */
    .login-container {
        padding: 10px !important;
        align-items: flex-start !important;
        padding-top: 60px !important;
    }
    
    .login-card {
        max-width: 100% !important;
        padding: 20px !important;
        margin: 0 !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 241, 255, 0.95) 100%) !important;
        border: 4px solid #FF6B8B !important;
        box-shadow: 
            0 8px 16px rgba(255, 107, 139, 0.2),
            inset 0 0 0 2px #FFE66D !important;
        position: relative !important;
    }
    
    .login-card::before {
        content: '📚';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.5rem;
        background: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #FF6B8B;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .login-title {
        font-size: 1.6rem !important;
        color: #FF6B8B !important;
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }
    
    .icon-cartoon {
        display: none !important;
    }
    
    .back-btn {
        top: 15px !important;
        left: 15px !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        color: white !important;
        border: 2px solid white !important;
        box-shadow: 0 4px 8px rgba(255, 107, 139, 0.3) !important;
    }
    
    .form-control {
        padding: 12px 16px !important;
        font-size: 1rem !important;
        border-radius: 15px !important;
        border: 2px solid #00C9FF !important;
        background: rgba(255, 255, 255, 0.9) !important;
    }
    
    .btn-login {
        padding: 12px !important;
        font-size: 1rem !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
        border: 2px solid white !important;
        box-shadow: 0 5px 0 rgba(255, 71, 87, 0.5) !important;
    }
    
    /* 上传作业页面变成便签纸 */
    .upload-card, .vote-card {
        padding: 15px !important;
        margin: 0 8px !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 240, 0.95) 100%) !important;
        border: 2px solid #FFE66D !important;
        box-shadow: 
            0 5px 15px rgba(255, 107, 139, 0.15),
            inset 0 0 0 1px #FF6B8B !important;
        position: relative !important;
    }
    
    .upload-card::before, .vote-card::before {
        content: '📌';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.5rem;
    }
}

/* 🦄 -------------------------------------------------
   动画定义 - 魔法动画集合
------------------------------------------------- 🎆 */
@keyframes rainbowText {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

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

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

@keyframes candyShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes rainbowMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

@keyframes rainbowSlide {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

@keyframes rainbowSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

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

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

@keyframes bgPulse {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

@keyframes dotsMove {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

@keyframes bubblePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes floatBalloon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

/* ✨ -------------------------------------------------
   特殊设备优化
------------------------------------------------- 🌟 */

/* 折叠屏设备 */
@media (max-width: 767.98px) and (min-height: 600px) and (orientation: landscape) {
    .main-title h1 {
        font-size: 2.5rem !important;
        animation: none !important;
    }
    
    .btn {
        min-height: 50px !important;
        min-width: 120px !important;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .card:hover, .btn:hover {
        transform: none !important;
    }
}

/* 🎨 -------------------------------------------------
   深色模式 - 夜晚的游乐园
------------------------------------------------- 🌙 */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg,
            #0A0F29 0%,
            #1A1F3A 50%,
            #2A2F4A 100%) !important;
        color: #FFE66D !important;
    }
    
    .card {
        background: linear-gradient(135deg, 
            rgba(26, 31, 58, 0.8) 0%,
            rgba(42, 47, 74, 0.8) 100%) !important;
        border-color: rgba(255, 107, 139, 0.3) !important;
        color: #E3F2FD !important;
    }
    
    .card-header {
        background: linear-gradient(90deg, 
            #FF6B8B 0%, 
            #FF8E53 100%) !important;
    }
    
    .btn {
        background: linear-gradient(135deg, 
            #FF6B8B 0%, 
            #00C9FF 100%) !important;
    }
    
    .navbar-footer {
        background: linear-gradient(90deg,
            #FF6B8B 0%,
            #FF8E53 50%,
            #00C9FF 100%) !important;
    }
    
    .login-card {
        background: linear-gradient(135deg, 
            rgba(26, 31, 58, 0.9) 0%,
            rgba(42, 47, 74, 0.9) 100%) !important;
        border-color: #FF6B8B !important;
    }
    
    .form-control {
        background: rgba(10, 15, 41, 0.8) !important;
        border-color: #00C9FF !important;
        color: #FFE66D !important;
    }
}

/* 📱 -------------------------------------------------
   触摸设备优化 - 更大点击区域
------------------------------------------------- 👆 */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-link {
        min-height: 48px !important;
        min-width: 48px !important;
    }
    
    .card:active {
        transform: scale(0.98) !important;
    }
    
    .btn:active {
        transform: scale(0.95) !important;
    }
}

/* 🖨️ -------------------------------------------------
   打印样式 - 黑白魔法书
------------------------------------------------- 📄 */
@media print {
    * {
        color: black !important;
        background: white !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .btn, .navbar-footer {
        display: none !important;
    }
}