/**
 * @description 欢迎页面样式，包含Tab切换和粒子动画效果样式
 * @author 前端川
 * @link www.iqdc.cn
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #0c0c1a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    color: #f0f4f8;
    overflow: hidden;
    position: relative;
}

/* 科技感网格背景 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        linear-gradient(rgba(100, 200, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 200, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
}

/* 渐变光晕效果 */
body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200vw;
    height: 200vh;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(100, 200, 255, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(150, 100, 200, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(100, 150, 200, 0.05) 0%, transparent 50%);
    animation: bgMove 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes bgMove {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(2%, 2%) rotate(1deg);
    }
    66% {
        transform: translate(-1%, 1%) rotate(-1deg);
    }
}

/* 浮动粒子 */
.light-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.light-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(150, 200, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(150, 200, 255, 0.5);
}

.light-dot:nth-child(1) { top: 10%; left: 10%; animation: float 15s ease-in-out infinite; }
.light-dot:nth-child(2) { top: 20%; left: 90%; animation: float 18s ease-in-out infinite 2s; }
.light-dot:nth-child(3) { top: 70%; left: 5%; animation: float 20s ease-in-out infinite 4s; }
.light-dot:nth-child(4) { top: 80%; left: 85%; animation: float 16s ease-in-out infinite 6s; }
.light-dot:nth-child(5) { top: 40%; left: 95%; animation: float 22s ease-in-out infinite 8s; }
.light-dot:nth-child(6) { top: 85%; left: 20%; animation: float 14s ease-in-out infinite 10s; }
.light-dot:nth-child(7) { top: 15%; left: 50%; animation: float 25s ease-in-out infinite 12s; }
.light-dot:nth-child(8) { top: 90%; left: 70%; animation: float 17s ease-in-out infinite 14s; }

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-30px) translateX(10px) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-20px) translateX(-10px) scale(1);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-40px) translateX(5px) scale(1.3);
        opacity: 0.7;
    }
}

.container {
    max-width: 850px;
    background: rgba(22, 22, 38, 0.88);
    border-radius: 20px;
    padding: 30px 35px;
    box-shadow:
        0 0 80px rgba(0, 255, 255, 0.15),
        0 0 160px rgba(0, 128, 255, 0.08),
        inset 0 0 50px rgba(0, 255, 255, 0.04);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(0, 255, 255, 0.25);
    text-align: center;
    animation: fadeIn 1.2s ease-out;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

@media (min-width: 769px) {
    .api-request {
        position: absolute;
        width: 10px;
        height: 10px;
        background: linear-gradient(135deg, #00ffff, #0080ff);
        border-radius: 50%;
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), 0 0 50px rgba(0, 128, 255, 0.3);
        animation: apiRequest 5s ease-in-out infinite;
        z-index: 1;
    }
    
    @keyframes apiRequest {
        0% {
            transform: scale(0);
            opacity: 1;
            left: 3%;
            top: 35%;
        }
        50% {
            transform: scale(1);
            opacity: 0.7;
            left: 50%;
            top: 15%;
        }
        100% {
            transform: scale(0);
            opacity: 0;
            left: 97%;
            top: 35%;
        }
    }
    
    .api-response {
        position: absolute;
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #0080ff, #00ffff);
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(0, 128, 255, 0.7), 0 0 40px rgba(0, 255, 255, 0.3);
        animation: apiResponse 5s ease-in-out infinite 2.5s;
        z-index: 1;
    }
    
    @keyframes apiResponse {
        0% {
            transform: scale(0);
            opacity: 1;
            right: 3%;
            top: 65%;
        }
        50% {
            transform: scale(1);
            opacity: 0.7;
            right: 50%;
            top: 85%;
        }
        100% {
            transform: scale(0);
            opacity: 0;
            right: 97%;
            top: 65%;
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.poem {
    font-size: 18px;
    line-height: 2;
    color: #d1d5db;
    text-align: left;
    animation: fadeIn 1.5s ease-out 0.3s both;
}

.poem p {
    line-height: 2.4;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: 4px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 普通话版标题 */
.title-mandarin {
    color: #7dd3e0;
    text-shadow:
        0 0 15px rgba(125, 211, 224, 0.5),
        0 0 30px rgba(100, 180, 200, 0.3);
}

/* 重庆版标题 */
.title-chongqing {
    color: #e67878;
    text-shadow:
        0 0 15px rgba(230, 120, 120, 0.5),
        0 0 30px rgba(210, 100, 100, 0.3);
}

/* 广东版标题 */
.title-guangdong {
    color: #e6aa50;
    text-shadow:
        0 0 15px rgba(230, 170, 80, 0.5),
        0 0 30px rgba(210, 150, 60, 0.3);
}

/* 东北版标题 */
.title-dongbei {
    color: #82bee6;
    text-shadow:
        0 0 15px rgba(130, 190, 230, 0.5),
        0 0 30px rgba(110, 170, 210, 0.3);
}

/* 上海版标题 */
.title-shanghai {
    color: #b48cd2;
    text-shadow:
        0 0 15px rgba(180, 140, 210, 0.5),
        0 0 30px rgba(160, 120, 190, 0.3);
}

.buddha {
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 28px;
    position: relative;
    letter-spacing: 3px;
    text-align: center;
}

/* 普通话版 - 柔和青蓝主题 */
.poem-mandarin .buddha {
    color: #7dd3e0;
    text-shadow:
        0 0 10px rgba(125, 211, 224, 0.4),
        0 0 20px rgba(100, 180, 200, 0.2);
}
.poem-mandarin {
    color: #d0f0f5;
}
.poem-mandarin code {
    color: #7dd3e0;
}
.poem-mandarin .footer a {
    color: #7dd3e0;
}

/* 重庆版 - 柔和珊瑚主题 */
.poem-chongqing .buddha {
    color: #e67878;
    text-shadow:
        0 0 10px rgba(230, 120, 120, 0.4),
        0 0 20px rgba(210, 100, 100, 0.2);
}
.poem-chongqing {
    color: #f5d0d0;
}
.poem-chongqing code {
    color: #e67878;
}
.poem-chongqing .footer a {
    color: #e67878;
}

/* 广东版 - 柔和琥珀主题 */
.poem-guangdong .buddha {
    color: #e6aa50;
    text-shadow:
        0 0 10px rgba(230, 170, 80, 0.4),
        0 0 20px rgba(210, 150, 60, 0.2);
}
.poem-guangdong {
    color: #f5e8d0;
}
.poem-guangdong code {
    color: #e6aa50;
}
.poem-guangdong .footer a {
    color: #e6aa50;
}

/* 东北版 - 柔和天蓝主题 */
.poem-dongbei .buddha {
    color: #82bee6;
    text-shadow:
        0 0 10px rgba(130, 190, 230, 0.4),
        0 0 20px rgba(110, 170, 210, 0.2);
}
.poem-dongbei {
    color: #d8e8f5;
}
.poem-dongbei code {
    color: #82bee6;
}
.poem-dongbei .footer a {
    color: #82bee6;
}

/* 上海版 - 柔和薰衣草主题 */
.poem-shanghai .buddha {
    color: #b48cd2;
    text-shadow:
        0 0 10px rgba(180, 140, 210, 0.4),
        0 0 20px rgba(160, 120, 190, 0.2);
}
.poem-shanghai {
    color: #e8d8f0;
}
.poem-shanghai code {
    color: #b48cd2;
}
.poem-shanghai .footer a {
    color: #b48cd2;
}



.footer {
    margin-top: 45px;
    font-size: 14px;
    color: #9ca3af;
    border-top: 1px solid rgba(0, 255, 255, 0.15);
    padding-top: 22px;
    text-align: center;
}

/* 普通话版 Footer - 炸裂闪现 */
.footer-mandarin {
    animation: footerMandarin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}
@keyframes footerMandarin {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.5);
        filter: blur(10px);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
        filter: blur(2px);
    }
    70% {
        transform: translateY(5px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 重庆版 Footer - 火爆弹入 */
.footer-chongqing {
    animation: footerChongqing 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes footerChongqing {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.3) rotate(-10deg);
        filter: blur(15px);
    }
    40% {
        transform: translateY(-20px) scale(1.1) rotate(3deg);
        filter: blur(5px);
    }
    60% {
        transform: translateY(10px) scale(0.95) rotate(-1deg);
    }
    80% {
        transform: translateY(-5px) scale(1.02) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

/* 广东版 Footer - 旋风卷入 */
.footer-guangdong {
    animation: footerGuangdong 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}
@keyframes footerGuangdong {
    0% {
        opacity: 0;
        transform: translateX(-100px) rotate(-180deg) scale(0.3);
        filter: blur(10px);
    }
    50% {
        transform: translateX(20px) rotate(10deg) scale(1.1);
        filter: blur(3px);
    }
    70% {
        transform: translateX(-10px) rotate(-5deg) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
        filter: blur(0);
    }
}

/* 东北版 Footer - 霸气砸入 */
.footer-dongbei {
    animation: footerDongbei 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes footerDongbei {
    0% {
        opacity: 0;
        transform: translateX(100px) translateY(-30px) scale(0.4);
        filter: blur(10px);
    }
    40% {
        transform: translateX(-30px) translateY(10px) scale(1.15);
        filter: blur(3px);
    }
    60% {
        transform: translateX(15px) translateY(-5px) scale(0.92);
    }
    80% {
        transform: translateX(-5px) translateY(2px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 上海版 Footer - 优雅绽放 */
.footer-shanghai {
    animation: footerShanghai 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}
@keyframes footerShanghai {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
        filter: blur(20px);
    }
    30% {
        opacity: 0.5;
        transform: scale(0.5) rotate(-20deg);
        filter: blur(10px);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
        filter: blur(5px);
    }
    70% {
        transform: scale(0.9) rotate(-2deg);
        filter: blur(2px);
    }
    85% {
        transform: scale(1.05) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

.footer a {
    color: #00ffff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.footer a:hover {
    color: #80ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

code {
    margin: 0 5px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    font-size: 1em;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5em;
}

/* 普通话版 code 样式 */
.poem-mandarin code {
    background: linear-gradient(135deg, rgba(125, 211, 224, 0.15), rgba(100, 180, 200, 0.15));
    border: 1px solid rgba(125, 211, 224, 0.3);
    box-shadow: 0 0 10px rgba(125, 211, 224, 0.2);
    color: #7dd3e0;
}
.poem-mandarin code:hover {
    background: linear-gradient(135deg, rgba(125, 211, 224, 0.25), rgba(100, 180, 200, 0.25));
    border-color: rgba(125, 211, 224, 0.5);
    box-shadow: 0 0 18px rgba(125, 211, 224, 0.35);
    transform: translateY(-2px) scale(1.05);
}

/* 重庆版 code 样式 */
.poem-chongqing code {
    background: linear-gradient(135deg, rgba(230, 120, 120, 0.15), rgba(210, 100, 100, 0.15));
    border: 1px solid rgba(230, 120, 120, 0.3);
    box-shadow: 0 0 10px rgba(230, 120, 120, 0.2);
    color: #e67878;
}
.poem-chongqing code:hover {
    background: linear-gradient(135deg, rgba(230, 120, 120, 0.25), rgba(210, 100, 100, 0.25));
    border-color: rgba(230, 120, 120, 0.5);
    box-shadow: 0 0 18px rgba(230, 120, 120, 0.35);
    transform: translateY(-2px) scale(1.05);
}

/* 广东版 code 样式 */
.poem-guangdong code {
    background: linear-gradient(135deg, rgba(230, 170, 80, 0.15), rgba(210, 150, 60, 0.15));
    border: 1px solid rgba(230, 170, 80, 0.3);
    box-shadow: 0 0 10px rgba(230, 170, 80, 0.2);
    color: #e6aa50;
}
.poem-guangdong code:hover {
    background: linear-gradient(135deg, rgba(230, 170, 80, 0.25), rgba(210, 150, 60, 0.25));
    border-color: rgba(230, 170, 80, 0.5);
    box-shadow: 0 0 18px rgba(230, 170, 80, 0.35);
    transform: translateY(-2px) scale(1.05);
}

/* 东北版 code 样式 */
.poem-dongbei code {
    background: linear-gradient(135deg, rgba(130, 190, 230, 0.15), rgba(110, 170, 210, 0.15));
    border: 1px solid rgba(130, 190, 230, 0.3);
    box-shadow: 0 0 10px rgba(130, 190, 230, 0.2);
    color: #82bee6;
}
.poem-dongbei code:hover {
    background: linear-gradient(135deg, rgba(130, 190, 230, 0.25), rgba(110, 170, 210, 0.25));
    border-color: rgba(130, 190, 230, 0.5);
    box-shadow: 0 0 18px rgba(130, 190, 230, 0.35);
    transform: translateY(-2px) scale(1.05);
}

/* 上海版 code 样式 */
.poem-shanghai code {
    background: linear-gradient(135deg, rgba(180, 140, 210, 0.15), rgba(160, 120, 190, 0.15));
    border: 1px solid rgba(180, 140, 210, 0.3);
    box-shadow: 0 0 10px rgba(180, 140, 210, 0.2);
    color: #b48cd2;
}
.poem-shanghai code:hover {
    background: linear-gradient(135deg, rgba(180, 140, 210, 0.25), rgba(160, 120, 190, 0.25));
    border-color: rgba(180, 140, 210, 0.5);
    box-shadow: 0 0 18px rgba(180, 140, 210, 0.35);
    transform: translateY(-2px) scale(1.05);
}

@media (max-width: 768px) {
    body {
        background: linear-gradient(135deg, #0c0c1a 0%, #1a1a2e 50%, #16213e 100%);
        padding: 20px 15px;
        min-height: 100dvh;
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    body::before {
        background-size: 30px 30px;
    }

    .light-dots {
        display: none;
    }

    .container {
        padding: 25px 20px;
        margin: 10px;
    }

    .poem-container {
        min-height: 380px;
    }
        max-width: 100%;
        border-radius: 16px;
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.08),
            0 0 40px rgba(0, 128, 255, 0.04);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(0, 255, 255, 0.15);
    }
    
    .page-title {
        font-size: 24px;
        margin-bottom: 20px;
        letter-spacing: 2px;
    }

    .title-mandarin {
        text-shadow:
            0 0 10px rgba(125, 211, 224, 0.4),
            0 0 20px rgba(100, 180, 200, 0.2);
    }
    .title-chongqing {
        text-shadow:
            0 0 10px rgba(230, 120, 120, 0.4),
            0 0 20px rgba(210, 100, 100, 0.2);
    }
    .title-guangdong {
        text-shadow:
            0 0 10px rgba(230, 170, 80, 0.4),
            0 0 20px rgba(210, 150, 60, 0.2);
    }
    .title-dongbei {
        text-shadow:
            0 0 10px rgba(130, 190, 230, 0.4),
            0 0 20px rgba(110, 170, 210, 0.2);
    }
    .title-shanghai {
        text-shadow:
            0 0 10px rgba(180, 140, 210, 0.4),
            0 0 20px rgba(160, 120, 190, 0.2);
    }

    .buddha {
        font-size: 20px;
        margin-bottom: 20px;
        letter-spacing: 1.2px;
    }

    .poem-mandarin .buddha {
        text-shadow:
            0 0 8px rgba(125, 211, 224, 0.3),
            0 0 15px rgba(100, 180, 200, 0.15);
    }
    .poem-mandarin {
        color: #d0f0f5;
    }
    .poem-chongqing .buddha {
        text-shadow:
            0 0 8px rgba(230, 120, 120, 0.3),
            0 0 15px rgba(210, 100, 100, 0.15);
    }
    .poem-chongqing {
        color: #f5d0d0;
    }
    .poem-guangdong .buddha {
        text-shadow:
            0 0 8px rgba(230, 170, 80, 0.3),
            0 0 15px rgba(210, 150, 60, 0.15);
    }
    .poem-guangdong {
        color: #f5e8d0;
    }
    .poem-dongbei .buddha {
        text-shadow:
            0 0 8px rgba(130, 190, 230, 0.3),
            0 0 15px rgba(110, 170, 210, 0.15);
    }
    .poem-dongbei {
        color: #d8e8f5;
    }
    .poem-shanghai .buddha {
        text-shadow:
            0 0 8px rgba(180, 140, 210, 0.3),
            0 0 15px rgba(160, 120, 190, 0.15);
    }
    .poem-shanghai {
        color: #e8d8f0;
    }
    .poem-mandarin code {
        color: #7dd3e0;
    }
    .poem-chongqing code {
        color: #e67878;
    }
    .poem-guangdong code {
        color: #e6aa50;
    }
    .poem-dongbei code {
        color: #82bee6;
    }
    .poem-shanghai code {
        color: #b48cd2;
    }
    .poem {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }
    
    .poem p {
        margin-bottom: 15px;
        line-height: 2.2;
    }

    .footer {
        margin-top: 25px;
        padding-top: 15px;
        font-size: 13px;
        border-top: 1px solid rgba(0, 255, 255, 0.1);
    }
    
    code {
        padding: 1px 6px;
        font-size: 0.9em;
        margin: 0 2px;
        border-radius: 3px;
    }

    .poem-mandarin code {
        box-shadow: 0 0 8px rgba(125, 211, 224, 0.15);
        border: 1px solid rgba(125, 211, 224, 0.2);
    }
    .poem-chongqing code {
        box-shadow: 0 0 8px rgba(230, 120, 120, 0.15);
        border: 1px solid rgba(230, 120, 120, 0.2);
    }
    .poem-guangdong code {
        box-shadow: 0 0 8px rgba(230, 170, 80, 0.15);
        border: 1px solid rgba(230, 170, 80, 0.2);
    }
    .poem-dongbei code {
        box-shadow: 0 0 8px rgba(130, 190, 230, 0.15);
        border: 1px solid rgba(130, 190, 230, 0.2);
    }
    .poem-shanghai code {
        box-shadow: 0 0 8px rgba(180, 140, 210, 0.15);
        border: 1px solid rgba(180, 140, 210, 0.2);
    }
    
    .api-request, .api-response {
        display: none;
    }
}

@media (max-width: 480px) {
    body {
        padding: 15px 10px;
    }

    .container {
        padding: 20px 15px;
        border-radius: 12px;
    }

    .poem-container {
        min-height: 350px;
    }

    .buddha {
        font-size: 18px;
        margin-bottom: 18px;
        letter-spacing: 1px;
    }

    .poem {
        font-size: 14px;
        line-height: 1.6;
    }

    .poem p {
        line-height: 2.1;
    }

    .footer {
        margin-top: 22px;
        padding-top: 13px;
        font-size: 12px;
    }

    code {
        padding: 1px 5px;
        font-size: 0.9em;
        margin: 0 1px;
    }
}

.tab-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
    animation: fadeIn 1s ease-out 0.2s both;
    flex-wrap: wrap;
}

.tab-button {
    padding: 8px 20px;
    background: rgba(22, 22, 38, 0.8);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 20px;
    color: #f0f4f8;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.tab-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.tab-button:hover::before {
    width: 150%;
    height: 150%;
}

/* 各版本悬停波纹背景色 */
.tab-button.tab-mandarin::before {
    background: radial-gradient(circle, rgba(125, 211, 224, 0.5) 0%, transparent 70%);
}

.tab-button.tab-chongqing::before {
    background: radial-gradient(circle, rgba(230, 120, 120, 0.5) 0%, transparent 70%);
}

.tab-button.tab-guangdong::before {
    background: radial-gradient(circle, rgba(230, 170, 80, 0.5) 0%, transparent 70%);
}

.tab-button.tab-dongbei::before {
    background: radial-gradient(circle, rgba(130, 190, 230, 0.5) 0%, transparent 70%);
}

.tab-button.tab-shanghai::before {
    background: radial-gradient(circle, rgba(180, 140, 210, 0.5) 0%, transparent 70%);
}

.tab-button:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
}

.tab-button:active {
    transform: translateY(0) scale(0.95);
}

.tab-button.active {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.25), rgba(0, 128, 255, 0.25));
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.4),
        0 0 30px rgba(0, 128, 255, 0.2);
    color: #00ffff;
    animation: tabPulse 2s ease-in-out infinite;
}

@keyframes tabPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(0, 255, 255, 0.4),
            0 0 30px rgba(0, 128, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(0, 255, 255, 0.6),
            0 0 50px rgba(0, 128, 255, 0.4);
    }
}

.poem-content {
    display: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.poem-content.active {
    display: block;
    opacity: 1;
    position: relative;
    transform: translateY(0);
}

.poem-content code {
    margin: 0 5px;
}

/* 容器固定高度 */
.poem-container {
    position: relative;
    min-height: 400px;
}

/* 普通话版内容 - 经典淡入 */
.poem-mandarin {
    transition-delay: 0s;
}
.poem-mandarin.active .buddha,
.poem-mandarin.active p,
.poem-mandarin.active .footer {
    animation: poemMandarin 0.5s ease-out 0.1s both;
}
@keyframes poemMandarin {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 重庆版内容 - 火爆弹入 */
.poem-chongqing {
    transition-delay: 0.05s;
}
.poem-chongqing.active .buddha,
.poem-chongqing.active p,
.poem-chongqing.active .footer {
    animation: poemChongqing 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes poemChongqing {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(5px);
    }
    60% {
        transform: translateY(-5px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 广东版内容 - 旋风飞入 */
.poem-guangdong {
    transition-delay: 0.05s;
}
.poem-guangdong.active .buddha,
.poem-guangdong.active p,
.poem-guangdong.active .footer {
    animation: poemGuangdong 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
}
@keyframes poemGuangdong {
    0% {
        opacity: 0;
        transform: translateX(-40px);
        filter: blur(5px);
    }
    50% {
        transform: translateX(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* 东北版内容 - 霸气砸入 */
.poem-dongbei {
    transition-delay: 0.05s;
}
.poem-dongbei.active .buddha,
.poem-dongbei.active p,
.poem-dongbei.active .footer {
    animation: poemDongbei 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes poemDongbei {
    0% {
        opacity: 0;
        transform: translateX(40px);
        filter: blur(5px);
    }
    50% {
        transform: translateX(-8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* 上海版内容 - 优雅展开 */
.poem-shanghai {
    transition-delay: 0.05s;
}
.poem-shanghai.active .buddha,
.poem-shanghai.active p,
.poem-shanghai.active .footer {
    animation: poemShanghai 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
}
@keyframes poemShanghai {
    0% {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(8px);
    }
    40% {
        transform: scale(1.02);
    }
    60% {
        transform: scale(0.99);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Tab切换时的光效 */
.tab-button.switching {
    animation: tabSwitch 0.4s ease-out;
}

@keyframes tabSwitch {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* 各版本Tab独特样式 - 温和色调 */
/* 普通话版 - 柔和青蓝 */
.tab-button.tab-mandarin {
    border-color: rgba(100, 200, 220, 0.3);
}
.tab-button.tab-mandarin:hover {
    background: rgba(100, 200, 220, 0.12);
    border-color: rgba(100, 200, 220, 0.5);
    box-shadow: 0 0 15px rgba(100, 200, 220, 0.3);
}
.tab-button.tab-mandarin.active {
    background: linear-gradient(135deg, rgba(100, 200, 220, 0.25), rgba(80, 170, 200, 0.25));
    border-color: rgba(100, 200, 220, 0.5);
    color: #7dd3e0;
    animation: tabPulseMandarin 2s ease-in-out infinite;
}
@keyframes tabPulseMandarin {
    0%, 100% { box-shadow: 0 0 10px rgba(100, 200, 220, 0.4), 0 0 20px rgba(80, 170, 200, 0.2); }
    50% { box-shadow: 0 0 18px rgba(100, 200, 220, 0.5), 0 0 35px rgba(80, 170, 200, 0.3); }
}

/* 重庆版 - 柔和珊瑚 */
.tab-button.tab-chongqing {
    border-color: rgba(230, 120, 120, 0.3);
}
.tab-button.tab-chongqing:hover {
    background: rgba(230, 120, 120, 0.12);
    border-color: rgba(230, 120, 120, 0.5);
    box-shadow: 0 0 15px rgba(230, 120, 120, 0.3);
}
.tab-button.tab-chongqing.active {
    background: linear-gradient(135deg, rgba(230, 120, 120, 0.25), rgba(210, 100, 100, 0.25));
    border-color: rgba(230, 120, 120, 0.5);
    color: #e67878;
    animation: tabPulseChongqing 2s ease-in-out infinite;
}
@keyframes tabPulseChongqing {
    0%, 100% { box-shadow: 0 0 10px rgba(230, 120, 120, 0.4), 0 0 20px rgba(210, 100, 100, 0.2); }
    50% { box-shadow: 0 0 18px rgba(230, 120, 120, 0.5), 0 0 35px rgba(210, 100, 100, 0.3); }
}

/* 广东版 - 柔和琥珀 */
.tab-button.tab-guangdong {
    border-color: rgba(230, 170, 80, 0.3);
}
.tab-button.tab-guangdong:hover {
    background: rgba(230, 170, 80, 0.12);
    border-color: rgba(230, 170, 80, 0.5);
    box-shadow: 0 0 15px rgba(230, 170, 80, 0.3);
}
.tab-button.tab-guangdong.active {
    background: linear-gradient(135deg, rgba(230, 170, 80, 0.25), rgba(210, 150, 60, 0.25));
    border-color: rgba(230, 170, 80, 0.5);
    color: #e6aa50;
    animation: tabPulseGuangdong 2s ease-in-out infinite;
}
@keyframes tabPulseGuangdong {
    0%, 100% { box-shadow: 0 0 10px rgba(230, 170, 80, 0.4), 0 0 20px rgba(210, 150, 60, 0.2); }
    50% { box-shadow: 0 0 18px rgba(230, 170, 80, 0.5), 0 0 35px rgba(210, 150, 60, 0.3); }
}

/* 东北版 - 柔和天蓝 */
.tab-button.tab-dongbei {
    border-color: rgba(130, 190, 230, 0.3);
}
.tab-button.tab-dongbei:hover {
    background: rgba(130, 190, 230, 0.12);
    border-color: rgba(130, 190, 230, 0.5);
    box-shadow: 0 0 15px rgba(130, 190, 230, 0.3);
}
.tab-button.tab-dongbei.active {
    background: linear-gradient(135deg, rgba(130, 190, 230, 0.25), rgba(110, 170, 210, 0.25));
    border-color: rgba(130, 190, 230, 0.5);
    color: #82bee6;
    animation: tabPulseDongbei 2s ease-in-out infinite;
}
@keyframes tabPulseDongbei {
    0%, 100% { box-shadow: 0 0 10px rgba(130, 190, 230, 0.4), 0 0 20px rgba(110, 170, 210, 0.2); }
    50% { box-shadow: 0 0 18px rgba(130, 190, 230, 0.5), 0 0 35px rgba(110, 170, 210, 0.3); }
}

/* 上海版 - 柔和薰衣草 */
.tab-button.tab-shanghai {
    border-color: rgba(180, 140, 210, 0.3);
}
.tab-button.tab-shanghai:hover {
    background: rgba(180, 140, 210, 0.12);
    border-color: rgba(180, 140, 210, 0.5);
    box-shadow: 0 0 15px rgba(180, 140, 210, 0.3);
}
.tab-button.tab-shanghai.active {
    background: linear-gradient(135deg, rgba(180, 140, 210, 0.25), rgba(160, 120, 190, 0.25));
    border-color: rgba(180, 140, 210, 0.5);
    color: #b48cd2;
    animation: tabPulseShanghai 2s ease-in-out infinite;
}
@keyframes tabPulseShanghai {
    0%, 100% { box-shadow: 0 0 10px rgba(180, 140, 210, 0.4), 0 0 20px rgba(160, 120, 190, 0.2); }
    50% { box-shadow: 0 0 18px rgba(180, 140, 210, 0.5), 0 0 35px rgba(160, 120, 190, 0.3); }
}

@media (max-width: 360px) {
    .container {
        padding: 18px 12px;
    }
    
    .buddha {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    .poem {
        font-size: 11.5px;
        line-height: 1.5;
    }
    
    .footer {
        margin-top: 20px;
        padding-top: 12px;
        font-size: 10.5px;
    }
    
    .tab-container {
        gap: 8px;
    }
    
    .tab-button {
        padding: 6px 16px;
        font-size: 12px;
    }
}