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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    -webkit-text-size-adjust: 100% !important; /* 防止微信自动调整字体大小*/
}

/* 头部样式 */
header {
    background-color: #ff3b3b;
    padding: 5px 10px;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; 
}

.header-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 768px;
    margin: 0 auto;  
    flex-direction: row;
    align-items: center;
    justify-content: space-between;   
    flex-wrap: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏溢出内容 */    
} 
.container{
    margin-top: 10px;
}
 
/* 全局设置网站标题链接样式 */
.site-title img {    
    max-height: 30px;  
    width: auto;    
    margin-right: 3px; 
    margin-bottom: -10px;
}
.header-actions {
    display: flex;
    justify-content: center;
    margin-right: auto;
    margin-top: 6px;
    gap: 20px;
}
.header-actions a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}
.header-actions a.active {   
    color: #ffe521;
}
.user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0; /* 允许文本截断 */
}
.user-info .username a[href="/profile.html"] {
    color: white;
    font-size: 16px;
    text-decoration: none; /* 取消下划线 */
    font-weight: normal; 
}
.user-info .username a:not([href="/profile.html"]) {
    color: white;
    font-size: 16px;
    text-decoration: none;  
    font-weight: normal; 
}
.nav-username a[href="/profile.html"] {
    color: white;
    font-size: 16px;
    text-decoration: none; /* 取消下划线 */
    font-weight: normal; 
}
.nav-username a:not([href="/profile.html"]) {
    color: white;
    font-size: 16px;
    text-decoration: none;  
    font-weight: normal; 
}
.avatar img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ddd;
}

/* 手机屏幕样式 */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row; /* 设置为水平排列 */
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px; /* 调整元素之间的间距 */                
    }    
    .site-title {        
        text-align: left;
        margin-bottom: 0; /* 移除底部边距 */   
    }
     
    .header-actions, .user-info {
        display: flex;
        align-items: center;
        gap: 10px; /* 调整元素之间的间距 */         
    }   
    .game-container,.ranking-section,.discussion-container,.profile-container,.activity-list {        
        padding: 10px !important;  
        margin: 0px -15px; 
    }  
    .tab {
        color: #333 !important;  
    }
    .tab.active {
        color: #ffffff !important;  
    } 
    
}
/* 底部导航栏样式 - 移动设备 */
@media (max-width: 768px) {
    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff; 
        z-index: 1000;
        padding: 8px 0;
        justify-content: space-around;
    }
    .mobile-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #666;
        text-decoration: none;
        font-size: 12px;
        flex: 1;
        max-width: 25%;
    }
    .mobile-nav .nav-item img {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }
    .mobile-nav .nav-item.active {
        color: #ff3b3b;
    }
    .mobile-nav .nav-item.active img {
        filter: brightness(0.8);
    }

    /* 调整主内容区域避免被底部导航栏遮挡 */
    main {
        padding-bottom: 40px !important;
    }
}

/* 桌面设备隐藏底部导航栏 */
@media (min-width: 769px) {
    .mobile-nav {
        display: none !important;
    }
}

/* 主要内容区域 */
main {
    max-width: 800px;
    margin: 10px auto;
    padding: 10px 15px;
    padding-top: 45px; /* 这个值应该等于header的高度 */
}
.game-container,.activity-list {
    background-color: white;
    border-radius: 10px;
    padding: 20px 10px;
    margin-bottom: 20px;  
}
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;  
}
.game-header h2 {
    font-size: 16px;
    color: #555;
} 
.rule-link {
    color: #f72525;
    font-size: 14px;
    cursor: pointer; /* 鼠标变为手型 */
} 

/* 选项卡样式 */
.tabs-background{
    background-color: #fbd7d7;
    border-radius: 8px;  
    margin: 5px -5px 5px -5px;
}
.selection-tabs {
    display: flex;
    justify-content: space-between; /* 添加这行使选项卡均匀分布 */
    gap: 10px;
    margin-bottom: 10px;
    margin-top: -5px;
}
.tab.record-tab{
    border:1px solid #fbd7d7;
}
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;  
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;  
    gap: 5px;
    flex: 1; /* 添加这行使每个选项卡等宽 */
}
.tab-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.tab-name {
    font-size: 15px;
    color: #444;
}
.tab.active {
    background-color: #ff3b3b;
    color: white;
    border-color: #ff3b3b;
}
.user-tabs{
    width: 200px;
}
.index-tabs .tab.active {
    background-color: #fbd7d7;  
}
.selection-hint {     
    font-size: 15px; 
    margin-top: 10px;
}

/* 投票选项列表样式 */
.option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; 
}
.option-content {
    flex: 0 1 auto;
    min-width: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; 
}
.option-details {
    flex: 2;
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stock-name {
    line-height: 1.5;
    cursor: pointer;
    min-width: 30px;
}
.stock-list {
    margin-bottom: 0px;
}
.stock-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.stock-item label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stock-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stock-selector {
    display: flex;
    align-items: center;
    cursor: pointer;
}
input[type="checkbox"] {
    width: 15px;
    height: 15px; 
    margin: 0;
    vertical-align: middle;
}
 
.hint-indicator {    
    cursor: pointer;  
}
.hint-placeholder {    
    width: 10px;     
}
.progress-bar {
    flex: 1;
    height: 7px;
    background-color: #ededed;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;  /* 进度从右侧开始 */
}
.progress {
    height: 100%;
    background-color: #ffd591; 
}
.option-remark{ 
    padding: 1px 5px 1px 5px;
    font-size: 14px;  
    border-radius: 4px;
    border: transparent; 
    white-space: nowrap;
    margin-right: 10px;
    color: #ff3b3b; 
}
.option-remark:not(:empty) { 
    background-color: #ededed;
}
/* 选项正确/错误标识 */
.correct-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;  
    margin-left: 5px;   
}
.correct-indicator.correct {
    background-color: #ff3b3b;
    color: white;
}
.correct-indicator.incorrect {
    background-color: #c8c8c8;
    color: white;
}
.voters {
    color: #999;
    font-size: 14px;
    min-width: 80px;
    text-align: right;     
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #ff3b3b;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;   
    cursor: pointer;  
    margin-top: 10px;   
}

.disclaimer {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0 0 0
}
/* 取消待定的加粗样式 */
.percentage.pending {
    color: #ff3b3b;
    font-weight: normal !important;
}
/* 登录后正确率红色加粗 */
.percentage.logged-in {
    color: #ff3b3b;
    font-weight: bold;
}
.status {
    margin-top: 10px; 
    font-size: 14px;
    color: #f80101
}
/* 排行榜部分 */
.ranking-section {
    background-color: white;
    border-radius: 10px;
    padding: 20px  ;  
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.end-time {
    color: #999;
    font-size: 12px;
}

/* 讨论区域 */
.discussion-section {
    background-color: white;
    border-radius: 10px;
    padding: 20px; 
}
.messages {
    margin: 15px 0;
}
.message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer; /* 鼠标悬停时显示手型图标 */
}
.message-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.message-content {
    flex: 1;
    padding: 10px 5px;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #666;   
}
.message-content-index {
    flex: 1;
    padding: 3px 5px 3px 0px;
    background-color: #f4f4ef;
    border-radius: 18px;
    margin: -5px 0px 15px 0px;
    color: #444; 
    font-size: 14px;
}
 
.reply-btn {
    width: 100%;
    padding: 12px;
    background-color: #ff7452;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}


/* 底部样式 */
.footer-content {
    text-align: center;
    padding: 10px; 
    text-decoration: none;
    font-size: 12px;
}
.footer-content a {
    text-decoration: none;
    color: #666;
}
.footer-content a:hover {
    text-decoration: none;
    color: #666;
}
 

/* 响应式布局 */
@media (min-width: 768px) {
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .site-title {
        text-align: left;
    }
     
    .header-actions,.user-info {
        justify-content: flex-end;
    } 
           
}

@media (max-width: 767px) {
    .header-container {
        text-align: center;
    }    
    .site-title {
        margin-bottom: 10px;
    }    
    .header-actions {
        margin-bottom: 10px;
    }
}

/* 用户登录页面样式 */
.auth-container {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    margin: 0px auto;
    max-width: 500px; 
}

.auth-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 20px;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    width: 100%; 
      
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;      
} 
.form-group label {
    color: #191919;
    font-size: 16px;
    white-space: nowrap;  
}
.form-group input {
    padding: 5px;  
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    transition: border-color 0.3s;    
}
.form-group input:focus {
    border-color: #ff7452;
    outline: none;
}
.captcha-group {
    margin-bottom: 10px;
}
.captcha-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.captcha-container input {
    flex: 1;
}

.captcha-image {
    height: 40px;
    border-radius: 5px;
}

.refresh-captcha {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.refresh-captcha:hover {
    background-color: #eee;
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #666;
}
.auth-footer a {
    color: #ff7452;
    text-decoration: none;
}

/* 响应式布局 */
@media (max-width: 767px) {
    .auth-container {
        margin: 10px -5px;
        padding: 20px;
    }
    
    .captcha-container {
        flex-direction: column;
    }
    
    .captcha-container input {
        width: 100%;
    }
    
    .captcha-image {
        width: 100%;
        height: auto;
    }
    
    .refresh-captcha {
        width: 100%;
    }
}

/* 用户信息页样式 */ 
.profile-container {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px; 
}
.profile-section, .records-section {
    margin-bottom: 10px ; 
}
.profile-content {
    display: flex;
    gap: 30px;
    margin-top: 20px;  
    margin-bottom: 10px;   
}
.profile-info {
    flex: 1;
}
.avatar-large img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.avatar-with-username {
    display: flex;
    flex-direction: row; /* 改为水平排列 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 调整头像和右侧内容的间距 */ 
    width: 100%;
    position: relative;   
}
.username-and-points {
    display: flex;
    flex-direction: column; /* 让用户名和积分垂直排列 */
    gap: 5px; /* 调整用户名和积分的间距 */
    margin-bottom: 10px;
}
.username {   
    font-size: 16px; 
    font-weight: bold;   
    white-space: nowrap; /* 防止用户名换行 */
    overflow: hidden; /* 隐藏溢出文本 */
    text-overflow: ellipsis; /* 显示省略号 */    
}

/* 关注列表链接样式 */
.follow-user-item a {
    text-decoration: none !important; /* 去除下划线 */
    color: inherit !important; /* 继承父元素颜色 */
}
.follow-user-item a:hover {
    text-decoration: none !important; /* 鼠标悬停时也保持无下划线 */
}
.follow-user-item {
    padding-top: 15px; 
}
.profile-avatar .unfollow-btn {    
    margin-top: 1px;  
    font-size: 14px;  
    background-color: #eae9e9;
    color: #6b6a6a;
}
.profile-avatar .avatar-large img {
    width: 30px;
    height: 30px;    
}
.profile-avatar .username {
    font-size: 14px;  
}

.points-display {    
    margin-bottom: 10px;     
}
.points-value {
    font-size: 18px;
    font-weight: bold;
    color: #ff7452;     
}
.points-rule {
    font-size: 14px;
    color: #666666;        
}
.info-list {
    list-style: none;
}
.info-list li {
    margin-bottom: 15px;
    font-size: 15px;
}
.info-vote{
    font-size: 15px; 
    font-weight: bold;
    margin-bottom: 15px;
}

.profile-actions {
    width: auto; /* 让宽度自动适应内容 */
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: fit-content; /* 确保容器宽度足够容纳内容 */
}
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile-header h3 {
    margin-right: auto; /* 标题保持左对齐 */
}
.logout,.edit-password{
    margin-left: 15px; /* 按钮之间保持间距 */
}
.edit-link, .logout, .edit-password {
    color: #f80101;
    font-size: 14px;
    text-decoration: none; /* 去掉下划线 */
    cursor: pointer;
}
.edit-link:hover,.logout:hover{
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.action-btn {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ff7452;
    color: white;
    cursor: pointer;
    font-size: 14px;
}  
.action-btn:hover {
    background-color: #e05a3a;
}
.avatar-preview {
    margin: 10px 0;
}
.avatar-preview img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
input[type="file"] {
    margin-top: 5px;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.login-box {
    background: white;
    padding: 2rem;
    border-radius: 8px; 
    width: 100%;
    max-width: 400px;
}

.login-form .form-group {
    margin-bottom: 1rem;
}

.login-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: #ff3b3b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-btn:hover {
    background-color: #fc3939;
}
/* 微信扫码登录 */
#qrModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.qr-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qr-modal-content p {
    margin-bottom: 15px;
    width: 100%;
}
.qr-modal-content img {
    margin: 0 auto;
}
.qr-close-btn {
    margin-top: 15px;
    padding: 5px 15px;
}

/* 用户信息页样式 */
.records-section {
    margin-top: 20px;
    padding: 0px;    
    border-radius: 8px;    
}
.records-section h2 {
    color: #333;
    margin-bottom: 15px;
}
/* 投票猜中率表格样式 */ 
.accuracy-table {
    width: 100%; /* 让表格宽度占满父容器 */ 
    margin-top: 0px;   
    margin-bottom: 15px; 
}
.accuracy-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 固定列宽 */
    font-size: 14px;
}
.accuracy-table th, .accuracy-table td {
    padding: 12px;
    text-align: left;     
}
.show-accuracy{
    text-decoration: none; 
    color: #ff3b3b; 
}
/* 排行榜表格样式 */
.ranking-list table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 固定列宽，防止内容过多时列宽变化 */    
}
/* 排行榜表头样式 */
.ranking-header-cell {
    font-size: 14px; /* 修改字体大小 */
    font-weight: bold; /* 保持或修改字体粗细 */
    color: #4e4d4d; /* 修改字体颜色 */   
    padding: 0px;  
}
.ranking-header-row, .rank-item {
    display: table-row;
}
.ranking-header-cell, .rank-info > span {
    font-size: 14px;
    display: table-cell;
    padding: 5px;
    border-bottom: 1px solid #eee;
    text-align: left;
    box-sizing: border-box;    
}
.rank-item {
    display: table-row;
    height: 30px; /* 调整行高 */
    line-height: 30px; /* 确保文本垂直居中 */   
}
.ranking-list table img.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle; /* 使头像垂直居中 */        
}
.rank-number.top-rank {
    font-weight: bold;
    color: #ff3b3b; /* 可以根据需求修改颜色 */
}
/* 调整列宽百分比 */
.ranking-header-cell:nth-child(1), .rank-info > span:nth-child(1) {    width: 10%; }
.ranking-header-cell:nth-child(2), .rank-info > span:nth-child(2) {    width: 23%; }
.ranking-header-cell:nth-child(3), .rank-info > span:nth-child(3) {    width: 15%; }
.ranking-header-cell:nth-child(4), .rank-info > span:nth-child(4) {    width: 20%; }
.ranking-header-cell:nth-child(5), .rank-info > span:nth-child(5) {    width: 20%; }

.ranking-header-row {    
    background-color: #f9f9f9;    
}
.rank-item:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}
.more-ranking-link {
    display: block;
    font-size: 14px;
    text-align: center;
    padding-top: 5px;
    margin-top: 5px;
    color: #ff3b3b;
    text-decoration: none; 
    margin-right: auto;
    margin-left: auto;      
    width: fit-content;
}
.more-ranking-link:hover {
    text-decoration: underline;
}
.discussion-link {
    display: block;
    text-align: left;
    padding: 10px 0px;
    color: #ff3b3b;
    text-decoration: none; 
    font-size: 14px;  
    cursor: pointer; /* 添加鼠标手势 */     
}
.links-container {
    position: relative;
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    background-image: url('/static/images/dh3.png');
    background-size: cover;
    background-position: center;
    border-radius: 1px;
}
.links-content {
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    justify-content: space-around;
}
.link-item {
    flex: 1;
    text-align: center;
}
.link-item a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.voting-link {     
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    color: #ff3b3b;
    text-decoration: none;       
}
.voting-join {
    margin-left: 10px;
    margin-top: 2px;
    padding: 3px 20px 5px 20px;
    background-color: #ff3b3b;
    color: white;
    border-radius: 8px;
    text-decoration: none;  
}
.description-header {      
    color: #ff3b3b;
    margin-bottom: 5px;
    font-size: 18px;
} 
.activity-description {
    position: relative;
    border: 1px solid #ddd; 
    border-radius: 8px;
    margin: 0px -5px 0px -5px;    
    padding: 10px;
    background-color: #fbfbfb;
    position: relative;  /* 确保这是relative定位 */     
}
.description-content {
    display: inline;
    position: relative;
    font-size: 14px;  
    line-height: 1.6; 
    color: #444;  
}
.collapse-btn {
    display: block;
    margin: 0 auto; 
    padding: 1px 10px 0px 10px;
    font-size: 14px;
    background: #e4e4e4;
    border: none;    
    color: #ff3b3b;
    cursor: pointer;
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.expand-description {
    position: relative;
    max-height: 100px;
    overflow: hidden;
}
/* 半透明过度效果 */
/* .expand-description::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
} */
.expand-btn {
    display: block;
    position: absolute;  /* 新增 */
    bottom: 0px;       /* 调整这个值可以控制按钮位置 */
    left: 50%;         /* 新增 */
    transform: translateX(-50%); /* 新增，保持居中 */
    margin: 0 auto;
    padding: 1px 10px 0px 10px;
    font-size: 14px;
    background: #e4e4e4;
    box-shadow: 0 0 5px white;
    border: none;
    color: #ff3b3b;
    cursor: pointer;
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    z-index: 2;        /* 新增，确保按钮在内容上方 */
}
.statement {
    font-size: 14px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
    color: #444; 
}
/* 用户选项卡样式 */
.tab.profile-tab {
    margin: -2px; 
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    background-color: #f5f5f5;      
}
.tab.profile-tab.active {
    background-color: #ff3b3b;
    color: white;
    border-color: #ff3b3b;
}

/* 用户中心投票记录表格样式 */
.records-list table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* 自动布局宽度 */
    font-size: 13px;
    background-color: white;
}
.records-list th, .records-list td {
    padding: 10px 5px 10px 5px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.records-list th {      
    background-color: #f5f5f5;
    color: #4e4d4d;
    font-weight: bold;
}
.records-list p {
    color: #b7b5b5;
    text-align: center;
}

/* 用户中心消息记录表格样式 */
.message-records-list {
    color: #535353;   
}
.message-records-list table {
    width: 100%;
    border-collapse: collapse;   
    font-size: 13px; 
    background-color: white;
}
.message-records-list th, .message-records-list td {
    padding: 10px 5px 10px 5px;
    text-align: left;
    border-bottom: 1px solid #ddd;    
}
.message-records-list th {
    background-color: #f5f5f5;
    color: #4e4d4d;
    font-weight: bold;   
}
.delete-message-btn {
    padding: 1px 5px;       
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #4d4d4e; 
    font-size: 12px;   
}
.delete-comment-btn {
    padding: 1px 5px; 
    margin-left: 10px;      
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #4e4d4d; 
    font-size: 12px;  
}
.delete-comment-btn2 {
    padding: 1px 5px; 
    margin-left: 10px;      
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #4e4d4d; 
    font-size: 12px;  
    background-color: #fdfdfd;
}
 

/* 设置每列的宽度调整 */
.records-list th:nth-child(1), .records-list td:nth-child(1) {width: 85%;}
.records-list th:nth-child(2), .records-list td:nth-child(2) {width: 15% ;}   
.message-records-list th:nth-child(1), .message-records-list td:nth-child(1) {width: 85%; }
.message-records-list th:nth-child(2), .message-records-list td:nth-child(2) {width: 15%; }

.pagination {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;   
    text-decoration: none;
    color: #333;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.avatar-preview {
    margin: 5px 0;
}
.avatar-preview img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

input[type="file"] {
    margin-top: 5px;
    font-size: 13px;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.login-box {
    background: white;
    padding: 2rem;
    border-radius: 8px; 
    width: 100%;
    max-width: 400px;
    margin: auto;
}
.login-box h2 {
    padding: 10px;       
}

.login-form .form-group {
    margin-bottom: 1rem;
}

.login-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-btn:hover {
    background-color: #0056b3;
}

/* 排行榜‘查看‘按钮样式 */
.view-today-vote {
    background-color: #ff7452; /* 背景颜色 */
    border: none; /* 去除边框 */
    color: white; /* 文字颜色 */
    padding: 4px 6px; /* 内边距 */
    text-align: center; /* 文字居中 */ 
    cursor: pointer; /* 鼠标悬停样式 */
    font-size: 13px; /* 字体大小 */
    border-radius: 4px; /* 圆角 */
    margin: 4px auto; /* 修改外边距，让按钮水平居中 */    
    display: block; /* 设置为块级元素，以便 margin: 0 auto 生效 */    
}
.scrollable-messages {
    max-height: 150px; /* 可根据需要调整 */
    overflow-y: hidden; /* 隐藏滚动条 */
    margin-bottom: 15px;
    font-size: 14px;
}


/* 讨论交流吧样式 */
.discussion-container {
    background-color: white;
    border-radius: 10px;
    padding: 20px;  
    margin-bottom: 10px;
}
.discussion-header {
    display: flex;
    justify-content: space-between; /* 修改为space-between */
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}
.activity-title {
    flex: 1; /* 确保标题区域占据剩余空间 */
}
.latest-activity-link {
    text-align: left;
    text-decoration: none;
    color: #ff3b3b;
    cursor: pointer;
}
.latest-activity-link:hover {
    text-decoration: none;
}
/* 消息内容样式 */
.message .message-content {
    color: #464646; /* 可以根据需要修改颜色 */
    font-size: 14px;
}
.send-message-btn {
    padding: 3px 10px;
    background-color: #ff3b3b;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 5px;
}
.send-message-btn.active {
    border: 1px solid #ddd;
    background: none;
    background-color: #f5f5f5; 
    color: #000000;
}   
 
.message-input-area {
    margin-bottom: 10px;
}

/* 富文本输入框样式 */
.rich-text-input {
    border: 1px solid #ddd;
    padding: 10px;
    min-height: 100px;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 0px;
    outline: none;
    font-size: 14px;
    line-height: 1.6;
}
.rich-text-input:focus {
    border-color: #ff7452;
    outline: none;
}
.rich-text-placeholder {
    font-size: 14px;
    color: #999;
    text-align: left;
    padding-left: 10px;
    display: inline-block;  /* 新增 */
    margin-right: auto;    /* 新增 */ 
    margin-top: -10px;  /* 新增 */  
}
.input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
    align-items: center;  /* 新增 */
}
.submit-message-btn {
    padding: 5px 15px;    
    border: none;
    border-radius: 8px;
    background-color: #ff7452;
    cursor: pointer;
    font-size: 14px;
    color: white;
}
.discussion-message {  
    padding-bottom: 2px;    
    padding: 5px 0PX ;    
    border-bottom: 1px solid #eee;       
}
.message-header {
    display: flex;
    align-items: center;
    gap: 5px;  
    justify-content: space-between;  
}
.message-header .username {    
    text-decoration: none ;
    color: black;
    font-size: 14px;
    margin: 0; /* 移除默认边距 */
    line-height: 35px;
}
.message-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.message-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.message-info {
    display: flex;
    flex-direction: column;
    gap: 10px;  
    flex-grow: 1;  
}
.post-time {
    color: #999;
    font-size: 12px;
    margin-left: auto;
}
.message-body {
    color: #000000 !important;
    font-size: 15px;
    margin-bottom: 10px;
    position: relative;
    line-height: 1.6;      
}
.message-body .message-content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: white;      
    text-decoration: none;   
}
.message-body.expanded .message-content {
    max-height: 2000px; /* 足够大的值以显示所有内容 */
}
.message-body .expand-toggle {
    display: inline-block ;
    padding: 3px 5px;
    background: white;
    border: none;
    color: #3c5bf7;
    cursor: pointer;
    font-size: 14px;   
    position: absolute;
    right: 0;
    bottom: 0; 
    margin-bottom: 10px;
     
}
.message-body .collapse-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 3px 5px;
    background: white;
    border: none;
    color: #3c5bf7;
    cursor: pointer;
    font-size: 14px;
}
.message-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.like-btn, .comment-btn, .delete-btn,.report-message-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 20px;
    background-color: #f9f9f9;    
    cursor: pointer;
    font-size: 13px;
    color: #6c6c6c !important;
}
.report-message-btn {
    margin-left: auto; /* 使投诉按钮靠右 */
}
.message-comments {
    margin-top: -10px;
    padding: 10px;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 5px;
    color: #404040;
    clear: both;  /* 确保不会被浮动元素影响 */
}
.comment {
    margin-bottom: 5px;
    padding: 2px 0;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.6;
    display: inline-block;
    width: 100%;
}

.comment-content-wrapper {
    display: inline;
    white-space: normal;
}

.comment-avatar {
    display: inline-flex;
    align-items: baseline;
    margin-right: 5px;
    vertical-align: middle;
}

.comment-avatar img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.comment-user {     
    color: #666;
    text-decoration: none;
    display: inline;
    vertical-align: middle;
}
.comment-content {
    color: #444;
    display: inline;
    vertical-align: middle;
}

.comment-actions {
    display: inline-flex;
    align-items: center;
}
.comment-input-area {
    margin-top: 0px;
    margin-bottom: 15px;  /* 增加底部间距 */    
    position: relative;  /* 为子元素提供定位上下文 */    
}
.comment-input {
    width: 100%;
    padding: 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;     
    resize: none;    
    min-height: 15px;   
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
    transition: height 0.2s;
    font-size: 14px;
}
.comment-input:focus {
    border-color: #ff3b3b;
    outline: none;
}
.submit-comment-btn {
    padding: 5px 15px;
    margin-top: -5px;
    border: none;
    border-radius: 8px;
    background-color: #ff7452;
    cursor: pointer;
    font-size: 14px;
    color: white;    
}
.cancel-btn {
    padding: 5px 15px;
    margin-top: -3px;
    border: none;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    color: #ff3b3b;    
}

/* 表情选择器样式 */
.emoji-picker {
    position: absolute;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

/* 隐藏文件上传输入框 */
input[type="file"].add-image-btn {
    display: none;
}
.icon-btn {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-btn:hover {
    background-color: #f5f5f5;
}
.image-icon {
    display: inline-block;
    margin: 0 2px;
}

/* 服务协议样式 */
.terms-container {
    max-width: 800px;
    margin: 10px auto;
    padding: 10px;
    background: #fff;     
}
.terms-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}
.terms-content {
    line-height: 1.6;
    font-size: 14px;
}
.terms-content h3 {
    margin: 20px 0 10px;
    color: #444;
}
.terms-content p {
    margin-bottom: 15px;
}

/* 电脑端样式 */
@media (min-width: 768px) {
    .modal-content {
        width: 768px;
    }
}
/* 手机端样式 */
@media (max-width: 767px) {
    .modal-content {
        width: 90%;
    }    
    
}
.modal-content-text{
    padding-left: 20px;
    font-size: 12px;
    max-height: 400px; 
    overflow-y: auto; /* 当内容超出最大高度时显示垂直滚动条 */
}
.close {
    color: #aaa;
    float: right;    
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#termsModal p, #termsModal h3 {
    line-height: 1.8; /* 可以根据需要调整这个值 */
}
.form-group-checkbox {
    font-size: 13px;
    margin-top: -5px;
     
    color: #616161;
} 
.auth-form a#showTerms {
    text-decoration: none;
    color: #4a5cd2;
    cursor: pointer; 
} 
    
/*用户展示页面样式 */
.follow-btn {   
    position: absolute;
    right: 0;
    margin-top: -40px;
    padding: 3px 15px;
    background-color: #ff3b3b;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
}
.user_page-content {
    display: flex;
    gap: 30px;
    margin: 20px 0;
    padding-top: 10px;
} 
.user_page-info {
    flex: 1;
    margin-top: -20px; 
    border-bottom: 1px solid #ddd;
}
.user-fluence{
    font-size: 14px;
    color: #6c6b6b;
}

/*微信登录按钮 */
.wechat-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #07C160;
    color: white;
    border-radius: 4px;
    margin-top: 15px;
    cursor: pointer;
}
.wechat-login-btn img {
    width: 25px;
    height: 20px;
    margin-right: 10px;
}
/*邮箱验证 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.verification-modal {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    line-height: 1.8;
    font-size: 14px;
}
.verification-modal input {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    height: 30px;
    width: 80%;
    font-size: 14px;
}
.modal-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}
.modal-buttons button {
    margin: 0 5px;
    padding: 5px 10px;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
#verify-code-btn {
    background: #ff3b3b;
}
#cancel-verify-btn {
    background: rgb(155, 154, 154);
}

.contact-list{
    line-height: 2.5;
    font-size: 14px;    
}
.contact-header{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
} 
.terms-header{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: sticky; 
    top: 0; 
    background: white; 
    z-index: 100; 
    padding: 0px 10px 10px 10px;
}

/*投票活动切换 */
.switch-activity {
    display: flex; 
    justify-content: space-between; /* 改为两端对齐 */
    align-items: center;
    font-size: 16px;
    margin-bottom: 15px; 
    margin-top: 15px; 
}  
.day {    
    color: #444; 
}
.next-activity {    
    padding: 1px 1px 1px 5px;
    background-color: #ddd; 
    color: #444;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    font-size: 16px;
}
.prev-activity {
    padding: 1px 5px 1px 1px;
    background-color: #ddd; 
    color: #444;
    border: 1px solid #ddd;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 16px;
}
.next-activity.no-bg ,.prev-activity.no-bg{
    background-color: transparent;
    border:transparent;
    cursor: text;       
} 
.activity-position{
    padding: 1px 5px;
    border: 1px solid #ddd;
    margin: 0 -5px;
}
.today-stats{
    font-size: 16px;
    color:#ff3b3b;  
    margin-left: 5px;  
}
.percentage {
    font-weight: bold;
    font-size: 16px;
    margin-left: -10px;
    color: #f04134;
} 
 
/* 分页样式 */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  gap: 8px;
}
.page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.page-btn:hover {
  background-color: #f5f5f5;
}
.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.page-info {
  display: inline-block;
  padding: 0 15px;
  font-size: 16px;
  color: #666;
  height: 30px;  
}
 

/* 活动列表样式 */
.activity-tables {   
    margin-left: -5px;   
    margin-right: -5px;  
    font-size: 16px;
}
.activity-table {
    width: 100%;
    background-color: #fff;
    overflow: hidden;      
}
.activity-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
}
.activity-table th, .activity-table td {
    padding: 8px 3px; 
    text-align: left; 
}
.activity-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #4e4d4d;
}
.activity-table tr:hover {
    background-color: #f5f5f5;
}
.activity-table a.activity-link {
    text-decoration: none;
    color: #000;
}
.activity-table th:nth-child(1),
.activity-table td:nth-child(1) {
    width: 73%;
}
.activity-table th:nth-child(2),
.activity-table td:nth-child(2) {
    width: 20%;
}
.activity-table th:nth-child(3),
.activity-table td:nth-child(3) {
    width: 12%;
}
@media (max-width: 768px) {
    .activity-table th, .activity-table td {
        padding: 8px 3px;
        font-size: 15px;
    }
}
.activity-tabs {
    display: flex;
    gap: 5px;
}
.activity-tab {
    padding: 3px 8px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #000;
}
.activity-tab.active {
    background-color: #ff3b3b;
    color: white;
    border-color: #ff3b3b;
}

/* 选项讨论区样式 */
.discussion-indicator {
    color: #666;
    font-size: 13px;
}
.discussion-indicator:hover {
    cursor: pointer;
    opacity: 0.8;
}
.messages-container {
  max-height: 150px;
  overflow-y: auto;
  padding: 2 5px;
  background: #fbfbfb;
  border-radius: 4px;
} 
.options-discussion{
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}
.options-message{
    margin: 10px 5px;
}