* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans SC', sans-serif;
}

:root {
    --primary: #4361ee;
    --secondary: #3f37c9;
    --accent: #4cc9f0;
    --light: #f8f9fa;
    --dark: #212529;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fbbf24;
    --radius: 8px;
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 鼠标显示不可用样式 */
.disabled {
    cursor: not-allowed;
}

/* 响应式标题字体大小 */
.title {
    @media only screen and (max-device-width : 480px) {
        font-size: 30px ;    
    }
    @media only screen and (min-device-width : 480px) {
        font-size: 60px ;    
    }
}

/* 背景样式 */
body {
    @media only screen and (max-device-width : 480px) {
        background-image: url(https://t.alcy.cc/mp);    
    }
    @media only screen and (min-device-width : 480px) {
        background-image: url(https://t.alcy.cc/pc);    
    }
    -webkit-backdrop-filter: blur(5px) brightness(0.8);
    backdrop-filter: blur(5px) brightness(0.8);
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 20px;
    color: var(--light);
}

/* 居中对齐文本 */
.center {
    text-align: center;
}

/* 限制容器宽度 */
.container {
    max-width: 1000px;
    margin: 0 auto;
}

.page-header {
    background-color: rgba(255, 255, 255, 0.255) ;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: black;
    padding: 30px;
    text-shadow: #212529;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 1em;
}

/* 页面内容样式 */
.page-content {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

/* 圆形图片样式 */
.circle-pic {
    border-radius: 30px;
}

/* 卡片样式 */
.card {
    color: black;
    background-color: rgba(255, 255, 255, 0.21) ;
    -webkit-backdrop-filter: blur(15px) ;
    backdrop-filter: blur(15px) ;
    border-radius: var(--radius);
    padding: 25px;
    text-shadow: #212529;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}

/* 卡片悬停效果 */
.card:hover {
    background-color: #d0dcf3b1 ;
    -webkit-backdrop-filter: blur(25px) ;
    backdrop-filter: blur(25px) ;
    transform: translateY(-5px);
}
    
/* 页面底部样式 */
.page-footer-plus {
    background: var(--shadow);
    color: black;
    text-shadow: #212529;
    text-align: center;
    padding: 25px;
    font-size: 0.9rem;
    border-radius: var(--radius);
    background-color: rgba(255, 255, 255, 0.255) ;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}


.page-footer {
    background: var(--shadow);
    color: black;
    text-shadow: #212529;
    text-align: center;
    padding: 25px;
    font-size: 0.9rem;
    border-radius: var(--radius);
    background-color: rgba(255, 255, 255, 0.255) ;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.right-img {
    right: 0;
}

/* 页面底部文字样式 */
.down-text {
    color: #212529 ;
    text-decoration: none ;
}

/* 这里直接复制粘贴豆包的 */
/* 弹动弹窗样式 */
.bounce-popup {
    position: absolute;
    top: 0;
    left: 0;
    /* 核心：宽度贴合内容，不再固定宽度 */
    width: fit-content; 
    /* 兜底：最大宽度不超过视口80%，避免内容过长时弹窗过宽 */
    max-width: 80vw;    
    /* 最大高度限制 + 内容滚动（保留长内容适配） */
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* 内边距保留，但不会导致宽度冗余 */
    padding: 20px;
    box-sizing: border-box;
    z-index: 9999;
    display: block;
    /* 内容过长时滚动，避免高度溢出 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 防止内容过少时弹窗过窄，可自定义最小宽度 */
    min-width: 150px;
    color: black;
    background-color: rgba(147, 146, 146, 0.751) ;
    -webkit-backdrop-filter: blur(15px) ;
    backdrop-filter: blur(15px) ;
    text-shadow: #212529;
    transition: transform 0.3s;
    text-align: center;
}

/* 弹窗关闭按钮 */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: #eee;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #666;
    transition: background 0.2s;
}

/* 关闭按钮悬停效果 */
.popup-close:hover {
    background: #ff4444;
    color: #fff;
}

/* 弹窗内容 */
.popup-content {
    margin-top: 10px;
    color: #333;
}
.popup-content h3 {
    margin: 0 0 10px 0;
    /* color: #2196F3; */
}
.popup-content p {
    margin: 0;
    line-height: 1.5;
}
/* 直接复制粘贴豆包的地方结尾 */

/* 没什么用的主题样式 */
.theme-1 {
    background-color:
    rgba(255, 255, 255, 0.255) ;
    -webkit-backdrop-filter: blur(15px) ;
    backdrop-filter: blur(15px) ; 
}
.theme-2 { 
    background: linear-gradient(135deg, #4361ee, #4cc9f0) ;
}

/* 自定义代码 */

/* 请输入文本 */