/* 在这里定义一些CSS变量，用于JavaScript中的弹窗样式，也可以放在styles.css中 */
:root {
    /* 颜色变量保持不变，确保文字仍然是青色系 */
    --primary-color: #00ffff;
    --secondary-color: #00f7ff;
    --text-color: #e0e0e0; /* 主要文本颜色，可根据背景亮度调整 */
    --light-text-color: #aaa;
    --copy-success-bg: #0affd1;
    --copy-success-shadow: #0affd1;
    --toggle-summary-color: #00f7ff;
    --toggle-summary-content-color: #66ffff;
    --card-info-strong-color: #00ffff;
    --card-info-span-bg: transparent; /* 卡密文本背景透明 */
    --card-info-span-text: #ffffff; /* 卡密文本颜色，确保在深色背景下可见 */
    --btn-bg: #00ffff;
    --btn-text: #000;
    --btn-shadow: 0 0 6px #00f7ff;
    --btn-hover-bg: #00c9d9;
    --btn-hover-shadow: 0 0 12px #00f7ff;

    /* 新增：波纹效果颜色 */
    --ripple-color: rgba(255, 255, 255, 0.4);

    /* 边框和阴影变量 */
    --announcement-border: 1px solid #00ffff44;
    --announcement-shadow: 0 0 10px #00ffff22;
    --toggle-border: 1px solid #00ffff55;
    --toggle-shadow: 0 0 10px #00f7ff22;
    --card-border: 1px solid #00ffff33;

    /* 返回顶部按钮颜色 */
    --back-to-top-bg: #00ffff;
    --back-to-top-hover-bg: #00c9d9;
    --back-to-top-text: #000;

    /* 新增CSS变量用于计算 (已移除，但变量保留，以免影响其他calc()) */
    --container-max-width: 960px; 
    --border-radius-size: 12px;   /* 统一圆角大小 */

    /* 新增群按钮的颜色和阴影变量 */
    --group-btn-bg-start: #00e6e6; /* 渐变起始色 */
    --group-btn-bg-end: #00b3b3;   /* 渐变结束色 */
    --group-btn-text-color: #000; /* 群按钮文字颜色 */
    --group-btn-shadow: 0 4px 15px rgba(0, 255, 255, 0.4); /* 群按钮阴影 */
    --group-btn-hover-shadow: 0 6px 20px rgba(0, 255, 255, 0.6); /* 群按钮悬停阴影 */
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    overflow-x: hidden; /* 防止内容超出视窗导致水平滚动条 */

    /* --- 调整为深沉的暖灰色/米灰色系背景 --- */
    background:
        /* 第一个渐变层：非常柔和、低透明度的暖灰，大尺寸，慢速移动 */
        linear-gradient(135deg, rgba(50, 50, 50, 0.08) 0%, rgba(70, 70, 70, 0.08) 100%),
        /* 第二个渐变层：略微带点米色调的深灰，中等尺寸，中速移动 */
        linear-gradient(45deg, rgba(60, 60, 60, 0.08) 0%, rgba(80, 80, 80, 0.08) 100%),
        /* 第三个渐变层：最主要的暖灰色基底，非常深，略带一点棕或米色调 */
        linear-gradient(225deg, #2a2a2a, #3a3a3a, #4a4a4a); /* 深暖灰色到更深的暖灰色 */

    background-size: 300% 300%, 200% 200%, 150% 150%; /* 各层背景尺寸 */
    background-position: 0% 0%, 50% 50%, 100% 100%; /* 各层初始位置 */
    animation:
        moveGradient1 30s ease infinite, /* 第一层动画：慢速 */
        moveGradient2 20s linear infinite, /* 第二层动画：中速 */
        moveGradient3 15s ease-in-out infinite; /* 第三层动画：快速，缓入缓出 */
}

/* 各层背景的动画关键帧保持不变 */
@keyframes moveGradient1 {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

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

@keyframes moveGradient3 {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* --- 多层动态渐变背景的核心代码结束 --- */


/* 页面主体内容容器的入场动画初始状态 */
.container {
    max-width: var(--container-max-width); /* 使用变量 */
    margin: auto;
    padding: 40px 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    position: relative;
    z-index: 1; /* 确保内容在背景之上 */
    background: rgba(255, 255, 255, 0.05); /* 容器背景透明化 */
    border-radius: var(--border-radius-size);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 入场动画激活状态：当 initial-hidden 类被移除时触发 */
.container:not(.initial-hidden) {
    opacity: 1;
    transform: translateY(0);
}

h1 {
    text-align: center;
    color: var(--primary-color);
    font-size: 32px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7); /* 使用固定的颜色值 */
    margin-bottom: 10px;
}

.subtitle {
    text-align: center;
    color: var(--light-text-color);
    font-size: 16px;
    margin-bottom: 30px;
}

.announcement {
    background: rgba(255, 255, 255, 0.05);
    border: var(--announcement-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--announcement-shadow);
    position: relative;
    z-index: 2; /* 确保它在 .container 和任何背景层之上 */
}

.announcement h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--secondary-color);
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
}

/* QQ 群按钮容器样式 */
.qq-group-buttons {
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    justify-content: center; /* 按钮水平居中 */
    gap: 15px; /* 按钮之间的间距 */
    margin-top: -15px; /* 向上微调，减少与公告的间距 */
    margin-bottom: 30px; /* 增加与下方内容的间距 */
    padding: 0 20px; /* 与容器左右内边距保持一致 */
}

.main-group-button {
    display: inline-flex; /* 使用 inline-flex 布局图标和文本 */
    align-items: center; /* 垂直居中对齐图标和文本 */
    justify-content: center; /* 水平居中对齐 */
    flex-grow: 1; /* 允许按钮在必要时拉伸 */
    min-width: 150px; /* 按钮最小宽度 */
    max-width: 200px; /* 按钮最大宽度 */
    padding: 12px 25px; /* 增加按钮内边距 */
    
    /* 美化按钮样式 */
    background: linear-gradient(145deg, var(--group-btn-bg-start), var(--group-btn-bg-end)); /* 渐变背景 */
    color: var(--group-btn-text-color); /* 按钮文字颜色 */
    text-align: center;
    text-decoration: none;
    border-radius: 10px; /* 稍微大一点的圆角 */
    font-weight: bold;
    font-size: 1.1em; /* 增大字体 */
    box-shadow: var(--group-btn-shadow); /* 按钮阴影 */
    transition: all 0.3s ease; /* 所有属性的平滑过渡 */
    cursor: pointer;
    white-space: nowrap; /* 防止按钮文字换行 */
    border: none; /* 确保没有默认边框 */
}

.main-group-button:hover {
    background: linear-gradient(145deg, var(--group-btn-bg-end), var(--group-btn-bg-start)); /* 悬停时渐变反转 */
    box-shadow: var(--group-btn-hover-shadow); /* 悬停时阴影加深 */
    transform: translateY(-3px) scale(1.02); /* 悬停时轻微上浮和放大 */
}

.main-group-button:active {
    transform: translateY(0); /* 点击时恢复原始位置 */
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3); /* 点击时阴影减弱 */
}


#content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#content li {
    margin-bottom: 15px;
}

.toggle {
    background: rgba(0,255,255,0.1);
    border: var(--toggle-border);
    border-radius: 10px;
    box-shadow: var(--toggle-shadow);
    overflow: hidden;
    position: relative;
    z-index: 2; /* 确保它在 .container 和任何背景层之上 */
}

.toggle summary {
    cursor: pointer;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: var(--toggle-summary-color);
    list-style: none;
    display: flex; /* Flexbox布局，使文本和箭头对齐 */
    justify-content: space-between;
    align-items: center;
    outline: none; /* 移除点击时的焦点轮廓 */
}

.toggle summary::after {
    content: "（点击展开/收起）";
    font-size: 14px;
    color: var(--toggle-summary-content-color);
    margin-left: 10px;
    white-space: nowrap; /* 防止文字换行 */
}

.toggle summary::-webkit-details-marker {
    display: none;
}

.card {
    background: rgba(255,255,255,0.05);
    border: var(--card-border);
    border-radius: 10px;
    padding: 15px 20px;
    margin: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 3; /* 确保它在 .toggle 和任何背景层之上 */
}

.info {
    flex: 1 1 65%;
    word-break: break-word;
}

.info strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    color: var(--card-info-strong-color);
}

/* 卡密文本框样式调整 */
.info span {
    display: block;
    background: var(--card-info-span-bg);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--card-info-span-text);
    font-family: monospace;
    margin-bottom: 6px;
    border: 1px dashed rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
}

.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px; /* 按钮之间的垂直间距 */
}

.btn, .download-btn {
    position: relative;
    overflow: hidden;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    box-shadow: var(--btn-shadow);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    min-width: 120px;
    display: inline-block;
    box-sizing: border-box;
    z-index: 1; /* 确保按钮内容在波纹之上 */
}

.btn:hover, .download-btn:hover {
    background: var(--btn-hover-bg);
    box-shadow: var(--btn-hover-shadow);
}

.btn.copied {
    background-color: var(--copy-success-bg) !important;
    box-shadow: 0 0 10px var(--copy-success-shadow), 0 0 20px var(--copy-success-shadow);
}

/* 按钮点击波纹效果的样式 */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    background-color: var(--ripple-color);
    z-index: -1; /* 确保波纹在按钮内容下方 */
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 复制成功弹窗的入场/退场动画 */
/* 初始状态隐藏，通过JS添加类来触发动画 */
.popup-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--copy-success-bg);
    color: var(--btn-text);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px var(--copy-success-shadow);
    z-index: 1000; /* 确保在最上层 */
    opacity: 0; /* 初始隐藏 */
    transform: translateY(-20px) scale(0.8); /* 初始位置和大小 */
}

/* 弹窗显示时触发入场动画 */
.popup-message.show { 
    animation: popup-appear 0.3s ease-out forwards;
}

/* 弹窗退场时触发退场动画 */
.popup-message.fade-out {
    animation: popup-disappear 0.3s ease-in forwards;
}

@keyframes popup-appear {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popup-disappear {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
}

/* 返回顶部按钮样式 */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--back-to-top-bg);
    color: var(--back-to-top-text);
    border: none;
    border-radius: 50%; /* 圆形按钮 */
    width: 50px;
    height: 50px;
    font-size: 1.8em; /* 增大箭头或文字 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0; /* 初始隐藏 */
    visibility: hidden; /* 初始隐藏 */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background 0.3s ease;
    z-index: 999; /* 确保在大多数元素之上 */
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    background: var(--back-to-top-hover-bg);
}


/* 媒体查询：响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
    h1 {
        font-size: 2em;
    }
    summary {
        font-size: 1.1em;
        padding: 15px 20px;
    }
    .card {
        flex-direction: column; /* 小屏幕上卡片内容垂直堆叠 */
        align-items: flex-start;
    }
    .action-buttons {
        width: 100%;
        justify-content: space-around; /* 按钮在底部平均分布 */
        flex-direction: row; /* 按钮横向排列 */
    }
    .btn, .download-btn {
        flex: 1; /* 按钮等宽 */
        margin: 0 5px; /* 调整按钮间距 */
        font-size: 0.95em;
    }
    .qq-group-buttons {
        flex-direction: column; /* 手机上按钮垂直堆叠 */
        gap: 10px; /* 调整间距 */
        padding: 0 10px; /* 调整左右边距 */
    }
    .main-group-button {
        max-width: 100%; /* 手机上按钮占满宽度 */
    }
    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.6em;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 15px;
    }
    h1 {
        font-size: 1.8em;
    }
    .announcement {
        padding: 10px 15px;
    }
    .popup-message {
        top: 10px;
        right: 10px;
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .action-buttons {
        flex-direction: column; /* 超小屏幕上按钮再次垂直堆叠 */
    }
    .btn, .download-btn {
        margin: 5px 0; /* 垂直间距 */
    }
}