/* 群聊主页静态样式文件 */

/* ========== 透明度统一配置 ========== */
:root {
    /* 主要透明度设置 - 调整这些数值可以统一控制所有元素的透明度 */
    --glass-opacity-main: 0.70;        /* 主卡片、导航栏、页脚透明度 */
    --glass-opacity-secondary: 0.2;    /* 公告卡片透明度 */
    --glass-opacity-tags: 0.10;        /* 标签透明度 */
    --glass-opacity-details: 0.7;      /* 详情项透明度 */
    
    /* 模糊效果设置 */
    --glass-blur-main: 30px;           /* 主要元素模糊度 */
    --glass-blur-secondary: 25px;      /* 次要元素模糊度 */
    
    /* 边框透明度 */
    --glass-border-opacity: 0.4;       /* 边框透明度 */
    --glass-border-light: 0.3;         /* 浅色边框透明度 */
    
    /* 动态渐变位置变量 */
    --gradient1-x: 20%;
    --gradient1-y: 20%;
    --gradient2-x: 80%;
    --gradient2-y: 80%;
    --gradient3-x: 40%;
    --gradient3-y: 60%;
    --gradient4-x: 60%;
    --gradient4-y: 40%;
    --gradient5-x: 80%;
    --gradient5-y: 20%;
    --gradient6-x: 20%;
    --gradient6-y: 80%;
}
/* ========================================= */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #333;
    background: 
        radial-gradient(circle at var(--gradient1-x) var(--gradient1-y), #667eea 0%, transparent 50%),
        radial-gradient(circle at var(--gradient2-x) var(--gradient2-y), #f093fb 0%, transparent 50%),
        radial-gradient(circle at var(--gradient3-x) var(--gradient3-y), #764ba2 0%, transparent 50%),
        radial-gradient(circle at var(--gradient4-x) var(--gradient4-y), #f5576c 0%, transparent 50%),
        radial-gradient(circle at var(--gradient5-x) var(--gradient5-y), #4facfe 0%, transparent 50%),
        radial-gradient(circle at var(--gradient6-x) var(--gradient6-y), #00f2fe 0%, transparent 50%),
        linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 
        300% 300%, 
        350% 350%, 
        280% 280%, 
        320% 320%, 
        290% 290%, 
        310% 310%, 
        400% 400%;
    animation: 
        gradientShift1 8s linear infinite,
        gradientShift2 10s linear infinite reverse,
        gradientShift3 12s linear infinite,
        gradientShift4 14s linear infinite reverse,
        gradientShift5 9s linear infinite,
        gradientShift6 11s linear infinite reverse,
        gradientShift 7s linear infinite;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* 粒子背景效果 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px);
    background-size: 100px 100px, 150px 150px, 80px 80px;
    animation: particleFloat 14s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%;
    }
    25% {
        background-position: 50% 25%, 25% 75%, 75% 25%, 25% 50%, 50% 75%, 75% 50%, 50% 25%;
    }
    50% {
        background-position: 100% 50%, 50% 100%, 50% 50%, 100% 25%, 25% 50%, 50% 100%, 100% 50%;
    }
    75% {
        background-position: 50% 75%, 75% 25%, 25% 75%, 75% 50%, 50% 25%, 25% 50%, 50% 75%;
    }
    100% {
        background-position: 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%;
    }
}

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

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

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

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

@keyframes gradientShift5 {
    0% { background-position: 25% 25%; }
    50% { background-position: 75% 75%; }
    100% { background-position: 25% 25%; }
}

@keyframes gradientShift6 {
    0% { background-position: 75% 25%; }
    50% { background-position: 25% 75%; }
    100% { background-position: 75% 25%; }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    z-index: 2;
}

/* 导航栏样式 */
.navbar {
    background: rgba(255, 255, 255, var(--glass-opacity-main));
    backdrop-filter: blur(var(--glass-blur-main)) saturate(1.8) brightness(1.1);
    border-radius: 24px;
    padding: 12px 20px;
    margin-bottom: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(255, 255, 255, var(--glass-border-light)),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1000;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.navbar:hover {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(35px) saturate(2.0) brightness(1.2);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.2),
        0 0 0 1.5px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #00f2fe);
    background-size: 400% 400%;
    animation: gradientBorder 6s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 18px;
    font-weight: bold;
    color: #5a67d8;
}

/* 导航按钮样式 */
.nav-buttons {
    display: flex;
    gap: 10px;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #8b9cf4 0%, #a8b5f7 50%, #f5a7fb 100%);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(139, 156, 244, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.nav-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(139, 156, 244, 0.4);
    background: linear-gradient(135deg, #a8b5f7 0%, #f5a7fb 50%, #8b9cf4 100%);
}

.nav-btn:hover::before {
    left: 100%;
}

.nav-btn:active {
    transform: translateY(0) scale(1.02);
}

.nav-btn-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.nav-btn-text {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    gap: 15px;
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s;
    cursor: pointer;
}

.nav-links a:hover {
    background: #5a67d8;
    color: white;
}

/* 主要内容区域 */
.main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.card {
    background: rgba(255, 255, 255, var(--glass-opacity-main));
    backdrop-filter: blur(var(--glass-blur-main)) saturate(1.8) brightness(1.1);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(255, 255, 255, var(--glass-border-light)),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.card:hover {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(40px) saturate(2.2) brightness(1.3);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 255, 255, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-8px) scale(1.02);
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #00f2fe);
    background-size: 400% 400%;
    animation: gradientBorder 6s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -2;
}

.card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: 1;
    border-radius: 24px;
}

.card:hover::after {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

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

/* 群信息卡片 */
.group-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
}

.group-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    color: white;
    box-shadow: 0 0 35px rgba(102, 126, 234, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    animation: avatarGlow 2s ease-in-out infinite alternate;
}

.group-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
}

@keyframes avatarGlow {
    0% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
    }
    100% {
        box-shadow: 0 0 35px rgba(240, 147, 251, 0.6);
    }
}

.group-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.group-name {
    font-size: 24px;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 12px;
}

.group-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.group-stats {
    display: flex;
    justify-content: space-around;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(90, 103, 216, 0.1);
}

.stat-item {
    text-align: center;
    flex: 1;
    padding: 0 10px;
}

.stat-number {
    font-size: 22px;
    font-weight: bold;
    color: #5a67d8;
    margin-bottom: 4px;
    display: block;
}

.stat-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* 加群区域 */
.join-section {
    text-align: center;
    position: relative;
    z-index: 10;
}

/* 为包含二维码的卡片创建特殊处理 */
.card:has(.qr-code) {
    overflow: hidden;
}

/* 如果浏览器不支持:has，使用类名方式 */
.card.qr-card {
    overflow: hidden;
}

.join-title {
    font-size: 18px;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 15px;
}

.qq-number {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #8b9cf4 0%, #a8b5f7 50%, #f5a7fb 100%);
    backdrop-filter: blur(20px);
    padding: 16px 24px;
    border-radius: 16px;
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 8px 32px rgba(139, 156, 244, 0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    letter-spacing: 1px;
}

.qq-number::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.qq-number:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(139, 156, 244, 0.35);
    background: linear-gradient(135deg, #a8b5f7 0%, #f5a7fb 50%, #8b9cf4 100%);
}

.qq-number:hover::before {
    left: 100%;
}

.qq-number::after {
    content: '✨ 点击复制群号';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2d3748, #4a5568);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.qq-number:hover::after {
    top: -48px;
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.join-button {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #8b9cf4 0%, #a8b5f7 50%, #f5a7fb 100%);
    backdrop-filter: blur(20px);
    padding: 16px 24px;
    border-radius: 16px;
    margin-top: 15px;
    border: none;
    box-shadow: 0 8px 32px rgba(139, 156, 244, 0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    letter-spacing: 1px;
    text-align: center;
    z-index: 10;
}

.join-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.join-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(139, 156, 244, 0.35);
    background: linear-gradient(135deg, #a8b5f7 0%, #f5a7fb 50%, #8b9cf4 100%);
}

.join-button:hover::before {
    left: 100%;
}

.join-button::after {
    content: '点击直接加群';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2d3748, #4a5568);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.join-button:hover::after {
    top: -48px;
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.qr-code {
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px) saturate(1.2) brightness(1.1);
    border-radius: 12px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    z-index: 50;
}

.qr-code:hover {
    transform: scale(1.6);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px) saturate(1.5) brightness(1.2);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    z-index: 100;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.qr-code::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: 1;
    border-radius: 12px;
}

.qr-code:hover::after {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

.qr-code img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: contain;
    background: white;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* 特色和公告区域 */
.features-announcements {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    margin-bottom: 15px;
    align-items: stretch;
}

/* 群特色卡片 */
.features-card {
    min-width: 280px;
    max-width: fit-content;
    width: auto;
    display: flex;
    flex-direction: column;
}

/* 群公告卡片 */
.announcements-card {
    display: flex;
    flex-direction: column;
}

.announcements-card #announcements {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 16px;
    border-left: 4px solid #5a67d8;
    padding-left: 12px;
}

.feature-tags-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: fit-content;
    flex: 1;
    justify-content: space-between;
}

.feature-category {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
}

.category-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
}

.theme-tag {
    background: linear-gradient(135deg, rgba(102, 126, 234, var(--glass-opacity-tags)), rgba(118, 75, 162, var(--glass-opacity-tags)));
    backdrop-filter: blur(var(--glass-blur-secondary)) saturate(1.5) brightness(1.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 
                0 0 0 1px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.atmosphere-tag {
    background: linear-gradient(135deg, rgba(240, 147, 251, var(--glass-opacity-tags)), rgba(245, 87, 108, var(--glass-opacity-tags)));
    backdrop-filter: blur(var(--glass-blur-secondary)) saturate(1.5) brightness(1.1);
    color: #f093fb;
    border: 1px solid rgba(240, 147, 251, 0.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 
                0 0 0 1px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tag {
    background: linear-gradient(135deg, rgba(102, 126, 234, var(--glass-opacity-tags)), rgba(240, 147, 251, var(--glass-opacity-tags)));
    backdrop-filter: blur(var(--glass-blur-secondary)) saturate(1.5) brightness(1.1);
    color: #5a67d8;
    border: 1px solid rgba(102, 126, 234, 0.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 
                0 0 0 1px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-tag::before,
.atmosphere-tag::before,
.tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.theme-tag:hover,
.atmosphere-tag:hover,
.tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-tag:hover::before,
.atmosphere-tag:hover::before,
.tag:hover::before {
    left: 100%;
}

.feature-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(247, 250, 252, var(--glass-opacity-details));
    border-radius: 8px;
    border-left: 3px solid #5a67d8;
}

.detail-label {
    font-weight: 600;
    color: #2d3748;
    min-width: 50px;
    margin-right: 8px;
}

.detail-value {
    color: #666;
    flex: 1;
}

.announcement {
    background: rgba(255, 245, 245, var(--glass-opacity-secondary));
    backdrop-filter: blur(var(--glass-blur-secondary)) saturate(1.6) brightness(1.05);
    border: 1px solid rgba(254, 215, 215, 0.4);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.announcement-title {
    font-weight: bold;
    color: #c53030;
    font-size: 14px;
}

.announcement-content {
    color: #666;
    font-size: 13px;
    margin-top: 4px;
    white-space: pre-line;
}

/* 底部信息 */
.footer {
    background: rgba(255, 255, 255, var(--glass-opacity-main));
    backdrop-filter: blur(var(--glass-blur-main)) saturate(1.8) brightness(1.1);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    color: #666;
    font-size: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(255, 255, 255, var(--glass-border-light)),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.footer:hover {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(35px) saturate(2.0) brightness(1.2);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1.5px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-3px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.join-requirements {
    color: #5a67d8;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 移动端性能优化 - 减少动画和特效 */
@media (max-width: 768px) {
    /* 禁用复杂的背景动画 */
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
        background-size: 100% 100%;
        animation: none; /* 禁用所有背景动画 */
    }
    
    /* 禁用粒子背景效果 */
    body::before {
        display: none;
    }
    
    /* 简化毛玻璃效果 */
    .card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px); /* 减少模糊强度 */
        transition: none; /* 移动端禁用过渡效果 */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* 固定阴影 */
        transform: none; /* 固定位置 */
    }
    
    /* 移动端彻底禁用卡片悬停效果 - 包括触摸 */
    .card:hover,
    .card:active,
    .card:focus {
        transform: none !important; /* 强制禁用浮动效果 */
        background: rgba(255, 255, 255, 0.85) !important; /* 强制保持原始背景 */
        backdrop-filter: blur(10px) !important; /* 强制保持原始模糊 */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important; /* 强制保持原始阴影 */
        border: 1px solid rgba(255, 255, 255, 0.4) !important; /* 强制保持原始边框 */
    }
    
    /* 禁用卡片的复杂动画效果 */
    .card::before,
    .card::after {
        display: none;
    }
    
    /* 简化导航栏效果 */
    .navbar {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        transition: none;
    }
    
    .navbar:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }
    
    .navbar::before {
        display: none;
    }
    
    /* 移动端导航按钮样式 */
    .nav-btn {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 12px;
        gap: 6px;
    }
    
    .nav-btn-icon {
        font-size: 14px;
    }
    
    .nav-btn-text {
        display: block; /* 所有屏幕尺寸都显示文字 */
        font-size: 14px; /* 小屏幕使用字体 */
    }
    
    /* 中等屏幕及以上使用更大的样式 */
    @media (min-width: 600px) {
        .nav-btn {
            padding: 10px 16px; /* 恢复桌面端的padding */
            font-size: 14px; /* 恢复桌面端的字体大小 */
        }
        
        .nav-btn-text {
            font-size: 14px; /* 恢复桌面端的文字大小 */
        }
    }
    
    /* 恢复按钮效果 - 移动端也保留交互 */
    .qq-number,
    .join-button {
        background: linear-gradient(135deg, #8b9cf4 0%, #a8b5f7 100%);
        transition: transform 0.2s ease, background 0.2s ease; /* 恢复过渡效果 */
    }
    
    /* 移动端按钮悬停效果 - 保留交互性 */
    .qq-number:hover,
    .join-button:hover {
        transform: translateY(-2px); /* 恢复浮动效果 */
        background: linear-gradient(135deg, #a8b5f7 0%, #f5a7fb 50%, #8b9cf4 100%);
        box-shadow: 0 8px 25px rgba(139, 156, 244, 0.3);
    }
    
    .qq-number::before,
    .join-button::before,
    .qq-number::after,
    .join-button::after {
        display: none;
    }
    
    /* 恢复二维码效果 - 移动端也保留交互 */
    .qr-code {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        transition: transform 0.3s ease; /* 恢复过渡效果 */
    }
    
    /* 移动端二维码悬停效果 - 保留交互性 */
    .qr-code:hover {
        transform: scale(1.3); /* 恢复缩放效果，适合移动端查看 */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        z-index: 100;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }
    
    .qr-code::after {
        display: none;
    }
    
    /* 简化标签效果 */
    .tag,
    .theme-tag,
    .atmosphere-tag {
        backdrop-filter: blur(5px);
        transition: none; /* 移动端禁用过渡 */
    }
    
    /* 移动端禁用标签悬停效果 */
    .tag:hover,
    .theme-tag:hover,
    .atmosphere-tag:hover {
        transform: none; /* 禁用浮动效果 */
    }
    
    .tag::before,
    .theme-tag::before,
    .atmosphere-tag::before {
        display: none;
    }
    
    /* 简化头像动画 */
    .group-avatar {
        animation: none;
        transition: none; /* 移动端禁用过渡 */
    }
    
    /* 移动端禁用头像悬停效果 */
    .group-avatar:hover {
        transform: none; /* 禁用缩放效果 */
    }
    
    /* 简化底部效果 */
    .footer {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        transition: none;
    }
    
    .footer:hover {
        transform: none;
    }
    
    /* 简化公告卡片 */
    .announcement {
        background: rgba(255, 245, 245, 0.8);
        backdrop-filter: blur(5px);
    }
    
    /* 禁用加载动画延迟 */
    .card {
        animation: none;
    }

    /* 响应式布局调整 */
    .main-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .features-announcements {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 手机端群特色卡片充分利用宽度 */
    .features-card {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .feature-tags-container {
        width: 100%;
    }

    .feature-category {
        width: 100%;
    }

    .category-tags {
        width: 100%;
        justify-content: flex-start;
    }

    .group-name {
        font-size: 20px;
    }

    .group-description {
        font-size: 14px;
    }

    .container {
        padding: 5px;
    }

    .card {
        padding: 15px;
    }

    .nav-content {
        flex-direction: column;
        gap: 10px;
    }

    .nav-links {
        justify-content: center;
    }
}

/* 触摸设备专用样式 - 彻底禁用悬停效果 */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .card:active,
    .card:focus {
        transform: none !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
    }
    
    /* 禁用所有卡片的伪元素动画 */
    .card::before,
    .card::after {
        display: none !important;
    }
}

/* 用户偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    body {
        animation: none !important;
    }
    
    body::before {
        animation: none !important;
    }
}

/* 动画效果 */
.card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.tag {
    transition: all 0.3s ease;
}

.tag:hover {
    transform: scale(1.05);
    background: rgba(200, 255, 240, 0.9);
}

/* 加载动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.6s ease-out;
}

.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

.card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Powered by 标识 */
.powered-by {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    opacity: 0.7;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
}

.powered-by span {
    font-size: 11px;
    color: #444;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: lowercase;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px) saturate(1.3) brightness(1.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.powered-by:hover {
    opacity: 0.9;
}

.powered-by:hover span {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .powered-by {
        margin-top: 15px;
        margin-bottom: 8px;
    }
    
    .powered-by span {
        font-size: 10px;
    }
}