/* 合并的CSS样式 - 从challenges.aspx和matches.aspx提取 */

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.allDIV {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, #ddd 100%);
    min-height: 100vh;
    /* padding: 0 20px; /* PC端左右内边距 */ */
    box-sizing: border-box;
}

.container {
    max-width: none;
    margin-bottom: 0;
    /* padding: 15px 20px; /* PC端左右留出边距 */ */
}

/* 头部样式 */
.challenge-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    /* padding: 15px 20px; */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	border-radius: 8px;
    margin-bottom: 10px;
    
    margin: 0 auto;
	width:100%;
	max-width: 800px;
    
}

.header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
	padding: 10px;
}

.challenge-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.challenge-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 12px;
}

.creator-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.creator-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0; /* 防止头像被压缩 */
}

.status-badge {   
    background: rgba(155,255,155,0.6);
    border-radius: 8px;
    padding: 2px 6px;
}

/* 表单控件样式 */
.language-selector, .league-selector {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.league-selector {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f9f9f9;
    margin-bottom: 10px;
    color: #333;
}

.language-selector option, .league-selector option {
    color: #333;
}

.share-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
	line-height: 1;  
    padding: 0 !important; 
}

/* 访问码区域 */
.access-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin: 20px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 800px;
}

.access-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
}

.access-input-group {
    display: flex;
    gap: 10px;
    max-width: 300px;
    margin: 0 auto 15px;
    justify-content: center;
}

.access-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 2px;
    max-width: 150px;
}



/* 按钮样式 */
.btn, .btn-access, .btn-join {
    background: linear-gradient(135deg, #00b09b, #96c93d);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-join {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 14px 40px;
    font-size: 1.1rem;
}

.btn-add {
    background: linear-gradient(135deg, #00b09b, #96c93d);
    color: white;
    margin-right: 10px;
}

.btn-complete {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    margin-left: 10px;
}

.btn:hover, .btn-access:hover, .btn-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.remove-btn {
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* 内容区域 */
.content-section {
    max-width: 800px;
    margin: 0 auto;
}

.section {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.join-section {
    text-align: center;
    padding: 30px 20px;
    background: white;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    max-width: 800px;
}

.rules-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    max-width: 800px;
}

.rules-section p {
    margin-bottom: 10px;
    padding-left: 10px;
}

/* 比赛列表样式 */
.mainCNT {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.mainRight {
    flex: 1;
    min-width: 375px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;
}

.gameList {
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 6px;
    background-color: #e9eef5;
    color: #000;
    border-radius: 4px;
}

.gameList p {
    margin: 0;
    font-weight: bold;
}

.match-list, .selected-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
	width: 100%;
}

.selected-list {
    min-height: 100px;
    background-color: #f9f9f9;
}

.match-item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
	width: 100%;
}

.match-item:last-child {
    border-bottom: none;
}

.match-radio {
    margin-right: 12px;
    transform: scale(1.2);
}

.match-info {
    flex: 1;
}

.match-teams {
    font-weight: 500;
    margin-bottom: 4px;
}

.match-time {
    font-size: 0.85rem;
    color: #666;
}

.select-all {
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    background-color: #f0f7ff;
    border-radius: 8px;
    justify-content: space-between;
}

.select-all-checkbox {
    margin-right: 10px;
    transform: scale(1.2);
}

.cusOnRight {
    /* 如果需要，可以在这里添加一些额外的样式 */
}

.selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	width: 100%;
}

.empty-message {
    text-align: center;
    color: #999;
    padding: 20px;
    font-style: italic;
}

/* 比赛卡片样式 */
.theMatch {
    display: flex;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.theMatch:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.mLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mRight {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #1c7747 0%, #27ad66 100%);
}

.mRight .go-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    width: 70px;
    background: white;
    color: #4facfe;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mTopRow {
    background-color: #3262b6;
    color: #fff;
    padding: 6px 0;
    text-align: center;
    font-size: 0.9rem;
}

.mMain {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.mLogoLt, .mLogoRt {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mLogoLt img, .mLogoRt img {
    max-height: 80%;
    max-width: 80%;
}

.mScore {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.mScoreR1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msr1Lt, .msr1Md, .msr1Rt {
    display: flex;
    align-items: center;
    justify-content: center;
}

.msr1Lt {
    width: 30%;
    font-size: 16px;
    font-weight: bold;
    color: #343a40;
}

.msr1Md {
    width: 40%;
    color: #666;
}

.msr1Rt {
    width: 30%;
    font-size: 16px;
    font-weight: bold;
    color: #343a40;
}

.mBotRow {
    background-color: #dde9fa;
    color: #2c2d2e;
    display: flex;
    justify-content: space-between;
    height: auto;
    padding: 6px 0;
}

.mBotLt, .mBotRt {
    flex: 1;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 500;
}

.mBotLt {
    text-align: left;
}

.mBotRt {
    text-align: right;
}

.go-button {
    display: block;
    padding: 12px 0;
    width: 80%;
    background: white;
    color: #4facfe;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.go-button:hover {
    background: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 参与者结果样式 */
.results-container {
    background: white;
    margin: 20px auto;
    max-width: 800px;
}

.participants-list {
    width: 100%;
}

.participant-card {
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.participant-main {
    display: flex;
    align-items: center;
    padding: 15px;
    background: white;
}

.participant-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
}

.participant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.participant-info {
    flex: 1;
}

.participant-nickname {
    font-weight: bold;
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 4px;
}

.participant-joined {
    font-size: 0.85rem;
    color: #666;
}

.participant-score {
    text-align: center;
    margin: 0 20px;
}

.score-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
}

.score-value {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: #e74c3c;
}

.participant-actions {
    margin-left: auto;
}


/* 球队信息样式 */
.match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 2;
}

.prediction-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.team-logo-small {
    width: 60px;
    height: 60px;
    object-fit: contain;
    max-width: 100%;
}

.team-name {
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.2;
    font-weight: 500;
    color: #333;
}

.vs-text {
    font-size: 0.8rem;
    color: #666;
    font-weight: bold;
    margin: 0 8px;
}

/* 比分显示样式 */
.prediction-score {
    font-weight: bold;
    font-size: 1.2rem;
    color: #e74c3c;
    flex: 1;
}

.score-display {
    background: #f8f9fa;
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid #dee2e6;
    min-width: 80px;
}

/* 底部按钮样式 - 优化版 */
.bottomActionButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 15px;
    background: transparent;
    margin-top: 0;
    margin-bottom: 20px;
    box-shadow: none;
}

.bottomActionButtons .btn {
    min-width: 120px;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bottomActionButtons .btn-complete {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}

.bottomActionButtons .btn-complete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

@media (min-width: 768px) {
    .bottomActionButtons {
        max-width: 800px;
        margin: 20px auto;
        padding: 25px 20px;
        margin-bottom: 30px;
    }
    
    .bottomActionButtons .btn {
        min-width: 140px;
        padding: 14px 35px;
        font-size: 1.1rem;
    }
}

/* 消息提示样式 */
.message-label {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    border-radius: 12px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    max-width: 80%;
    text-align: center;
    display: none;
    font-size: 16px;
    backdrop-filter: blur(10px);
    animation: popupMessage 0.3s ease-out;
}

.message-label.error {
    background: #f44336;
    color: white;
}

.message-label.success {
    background: #4CAF50;
    color: white;
}

.message-label.warning {
    background: #FF9800;
    color: white;
}

.message-label.info {
    background: #2196F3;
    color: white;
}

/* 预测弹层样式 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.prediction-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    display: none;
    width: 350px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    border-radius: 8px;
}

.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.team-logo {
    max-width: 50px;
    max-height: 50px;
    margin: 0 15px;
}

.prediction-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 10px;
}

.prediction-number {
    width: 50px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.decrement, .increment {
    width: 40px;
    height: 40px;
    background-color: #e9eef5;
    border: 1px solid #96b7e4;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.save-prediction {
    padding: 12px 30px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
}

/* 修复排名样式 */
.results-section {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* 排名表头 - 桌面端显示 */
.ranking-header {
    display: none;
    grid-template-columns: 60px 1fr 80px 80px 80px 60px;
    gap: 10px;
    padding: 12px 15px;
    font-weight: bold;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.ranking-header span {
    text-align: center;
}

.ranking-header span:nth-child(2) {
    text-align: left;
}

/* 排名行 - 移动端优先 */
.participants-ranking {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.ranking-row {
    display: grid;
    grid-template-columns: 50px 1fr auto auto auto 50px;
    gap: 8px;
    align-items: center;
    padding: 12px 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-width: 320px;
}

.rank-number {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: #666;
}

.rank-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rank-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rank-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rank-total-score,
.rank-win-count,
.rank-goals-diff {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 分数颜色样式 */
.rank-total-score.score-positive {
    background-color: #d4edda;
    color: #155724;
}

.rank-total-score.score-negative {
    background-color: #f8d7da;
    color: #721c24;
}

.rank-total-score.score-zero {
    background-color: #e2e3e5;
    color: #383d41;
}

.rank-win-count {
    background-color: #e7f3ff;
    color: #0066cc;
}

.rank-goals-diff {
    background-color: #fff3cd;
    color: #856404;
}

.rank-actions {
    display: flex;
    justify-content: center;
}

/* 特殊排名样式 */
.rank-1 {
    background: linear-gradient(135deg, #fff9e6, #ffffff);
    border-left: 4px solid #ffc107;
}

.rank-2 {
    background: linear-gradient(135deg, #f0f0f0, #ffffff);
    border-left: 4px solid #6c757d;
}

.rank-3 {
    background: linear-gradient(135deg, #ffe0d4, #ffffff);
    border-left: 4px solid #fd7e14;
}

/* 当前用户排名区域 */
.current-user-ranking-section {
    margin-bottom: 20px;
    border: 2px solid #4CAF50;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
    overflow: hidden;
}

.current-user-header {
    background: #4CAF50;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 1.1em;
}

.current-user-ranking {
    display: grid;
    grid-template-columns: 50px 1fr auto auto auto 50px;
    gap: 8px;
    align-items: center;
    padding: 12px 10px;
    background: white;
    margin: 0;
    min-width: 320px;
}

.current-user-ranking.highlighted-rank {
    background: #f0fff0;
    border-left: 4px solid #4CAF50;
}

.current-user-ranking.not-in-top {
    background: #fff8f0;
    border-left: 4px solid #FF9800;
}

.current-user-ranking.not-ranked {
    background: #f5f5f5;
    border-left: 4px solid #9E9E9E;
}

.rank-hint {
    font-size: 0.85em;
    color: #666;
    margin-left: 8px;
    font-style: italic;
}

/* 平板端样式 */
@media (min-width: 768px) {
    .ranking-header {
        display: grid;
    }

    .participants-ranking {
        display: block;
    }

    .ranking-row {
        margin-bottom: 6px;
    }

    .ranking-row,
    .current-user-ranking {
        grid-template-columns: 60px 1fr 100px 100px 100px 60px;
        gap: 10px;
        padding: 12px 15px;
    }

    .rank-name {
        font-size: 15px;
    }

    .rank-total-score,
    .rank-win-count,
    .rank-goals-diff {
        font-size: 15px;
    }
}

/* 桌面端样式 */
@media (min-width: 1024px) {
    .results-section {
        overflow-x: visible;
    }

    .ranking-row,
    .current-user-ranking {
        grid-template-columns: 70px 1fr 120px 120px 120px 70px;
        gap: 12px;
        padding: 15px 20px;
    }

    .ranking-header {
        grid-template-columns: 70px 1fr 120px 120px 120px 70px;
        gap: 12px;
        padding: 15px 20px;
    }

    .rank-name {
        font-size: 16px;
    }

    .rank-total-score,
    .rank-win-count,
    .rank-goals-diff {
        font-size: 16px;
    }
}

/* 确保容器不会溢出 */
.results-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}



/* 预测详情样式 */

.predictions-table {
    width: 100%;
}

.prediction-header {
    display: flex;
    background: #e9ecef;
    padding: 12px 10px;
    font-weight: bold;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.prediction-header span {
    flex: 1;
    text-align: center;
}

.prediction-row {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    background: white;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.prediction-row span {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.predictions-detail {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    width: 100%;
    box-sizing: border-box;
}

.predictions-detail.active {
    display: block;
}

.predictions-detail-content h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
}

.no-predictions {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

.toggle-predictions-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #007bff;
    padding: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.toggle-predictions-btn:hover {
    background-color: #f8f9fa;
    transform: scale(1.1);
}

.toggle-predictions-btn:disabled {
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.5;
}

/* 三列预测表格样式 */
.predictions-table.three-columns {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 15px;
    align-items: center;
    width: 100%;
}

.predictions-table.three-columns .prediction-header {
    display: contents;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 0;
}

.predictions-table.three-columns .prediction-header span {
    padding: 10px 5px;
    text-align: center;
    border-bottom: 2px solid #dee2e6;
}

.predictions-table.three-columns .prediction-row {
    display: contents;
}

.predictions-table.three-columns .prediction-row > span {
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 比赛信息列 */
.match-info {
    display: flex;
    align-items: center;
    justify-content: center; /* 确保图片在中间 */
    gap: 5px !important; /* 强制应用更小的间距 */
    /* max-width: 220px; */
}

.team-logo-small {
    width: 30px !important;
    height: 30px !important;
    /* object-fit: contain; */
    margin: 0 5px !important; /* 给图片添加内边距，确保间距更小 */
}

.actual-score {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    max-width: 30px;
    text-align: center;
}

/* 用户预测列 */
.user-prediction {
    font-weight: 600;
    font-size: 14px;
    color: #007bff;
	min-width:70px;
}

/* 预测得分列 */
.prediction-score {
    font-weight: bold;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
	min-width:80px;
}

.score-positive {
    background-color: #d4edda;
    color: #155724;
}

.score-negative {
    background-color: #f8d7da;
    color: #721c24;
}

.score-zero {
    background-color: #e2e3e5;
    color: #383d41;
}



/* myzone.aspx 样式 */
.menu-container {
    max-width: 100%;
    margin-bottom: 0;
    padding: 15px 20px;
}

.menu-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.menu-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 1.5rem;
}

.menu-content {
    flex: 1;
}

.menu-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c3e50;
}

.menu-desc {
    font-size: 0.9rem;
    color: #666;
}

.menu-badge {
    background: #ff4757;
    color: white;
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 0.8rem;
    margin-left: 10px;
}

.logout-section {
    padding: 20px 15px;
    text-align: center;
    margin-top: 30px;
}

.btn-logout {
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: #ff3742;
    transform: translateY(-2px);
}

.logout-link {
    text-align: center;
    margin: 20px 0;
}

.logout-link a {
    color: #999;
    text-decoration: none;
}

/* 用户挑战赛区域样式 */
.user-challenges-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.challenges-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.challenges-header .section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.view-all-link {
    font-size: 0.9rem;
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.view-all-link:hover {
    color: #764ba2;
    transform: translateX(2px);
}

.challenges-list {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

.challenges-list::-webkit-scrollbar {
    width: 6px;
}

.challenges-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.challenges-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.challenges-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.challenge-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.challenge-item:hover {
    background: #e9ecef;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.challenge-item:last-child {
    margin-bottom: 0;
}

.challenge-creator {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.creator-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.creator-avatar-small img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.creator-info {
    flex: 1;
    min-width: 0;
}

.creator-name {
    font-weight: 500;
    font-size: 0.95rem;
    color: #0A7;
    margin: 12px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
}

.access-code {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
    background-color: #c5d8f8;
    padding: 1px 4px;
    border-radius: 3px;
    display: inline-block;
}
.challenge-status {
    font-size: 0.75rem;
    padding: 2px 3px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    width:160px;
	background: #d4edda;
    color: #155724;
}

.challenge-status.ended {
    background: #e2e3e5;
    color: #383d41;
}

.challenge-status.pending {
    background: #fff3cd;
    color: #856404;
}

.challenge-arrow {
    font-size: 1.2rem;
    color: #6c757d;
    margin-left: 10px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.challenge-item:hover .challenge-arrow {
    transform: translateX(3px);
    color: #667eea;
}

.empty-challenges {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

/* 返回按钮特殊样式 */
.back-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 20px 10px 10px 10px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
}

.menu-icon-back {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;  
    justify-content: center !important;  
    color: white !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    line-height: 1;  
    padding: 0 !important;  
}

/* 显示更多按钮 */
.show-more-section {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
}

.btn-show-more {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-show-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 参与按钮样式 */
.btn-join {
    display: inline-block;
    padding: 12px 24px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-join:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

.btn-join:active {
    transform: translateY(0);
}

.btn-join.joined {
    background-color: #6c757d;
    cursor: not-allowed;
}

.btn-join.joined:hover {
    background-color: #6c757d;
    transform: none;
}

.btn-join.full {
    background-color: #ff6b6b;
    cursor: pointer;
}

.btn-join.full:hover {
    background-color: #ff5252;
}

.btn-join.full:active {
    background-color: #ff5252;
}

.btn-join:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}

.btn-join:disabled:hover {
    background-color: #cccccc;
    transform: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .allDIV {
        padding: 0; !important;
        margin: 0;
    }
    
    
    .menu-container {
        padding: 15px 8px;
    }
    
    .user-challenges-section {
        padding: 15px 12px;
        margin: 8px 4px;
    }
    
    .menu-item {
        margin: 10px 0;
        padding: 15px 12px;
    }
    
    .challenge-header {
        margin: 0 auto;
        padding: 15px 12px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .challenges-list {
        max-height: 250px;
    }
    
    .challenge-item {
        padding: 10px 12px;
    }
    
    .creator-avatar-small {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .creator-name {
        font-size: 0.9rem;
    }
    
    .back-button {
        height: 50px !important;
        margin: 15px 8px 8px 8px !important;
    }
    
    .menu-icon-back {
        width: 35px !important;
        height: 35px !important;
        font-size: 1.3rem !important;
        padding-top: 0 !important;
    }
    
    .theMatch {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .mLeft {
        width: calc(100% - 60px);
    }
    
    .mRight {
        width: 60px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .access-section, .join-section, .rules-section {
        margin: 12px 8px;
    }
   
    .mRight .go-button {
        width: 46px;
    }

    
    .access-section,
    .join-section,
    .rules-section {
        margin: 15px 10px;
        border-radius: 8px;
    }
    
    .mainCNT {
        margin: 0;
    }
    
    .challenge-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .header-top {
        flex-direction: row;
        gap: 10px;
    }
    
    .challenge-title {
        font-size: 1.3rem;
    }
    
    .creator-info {
        justify-content: center;
    }

    .prediction-header {
        padding: 10px 8px;
        font-size: 0.8rem;
    }
    
    .prediction-row {
        padding: 10px 8px;
        flex-wrap: nowrap;
    }
    
    .match-teams {
        gap: 4px;
    }
    
    .team-logo-small {
        width: 50px;
        height: 50px;
    }
    
    .team-name {
        font-size: 0.75rem;
    }
    
    .vs-text {
        font-size: 0.7rem;
        margin: 0 5px;
    }
    
    .prediction-score {
        font-size: 1.1rem;
    }
    
    .score-display {
        padding: 6px 12px;
        font-size: 1rem;
        min-width: 70px;
    }

    .predictions-detail {
        padding: 10px;
    }
    
    .prediction-header, .prediction-row {
        flex-wrap: wrap;
    }
    
    .prediction-header span, .prediction-row span {
        flex: 0 0 50%;
        margin-bottom: 5px;
        font-size: 0.8rem;
    }
}

/* 动画定义 */
@keyframes popupMessage {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}








/* 个人中心底部导航 */


.bottom-nav .nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.bottom-nav .nav-left a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

.bottom-nav .nav-right {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.bottom-nav .nav-right a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;   
    color: white !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.bottom-nav .nav-right a:hover {
    background: #1976D2 !important;
    transform: scale(1.1) !important;
}

.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #2a5298 !important;
    padding: 12px 15px !important;
    border-top: 1px solid #e0e0e0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 1000 !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
	margin:0 auto;
	max-width:800px;
}

.footerBlankRoom {
    padding-bottom: 80px; 
}

/* myfavor myprofile myactivity style */
/* 添加到 actionStyles.css 文件末尾 */

/* myprofile.aspx 页面样式 */
.page-myprofile .profile-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.page-myprofile .profile-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-myprofile .avatar-section {
    text-align: center;
    margin-bottom: 30px;
}

.page-myprofile .avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e0e0e0;
    margin: 0 auto 15px;
    display: block;
}

.page-myprofile .avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.page-myprofile .btn-upload {
    background: #2196F3;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.page-myprofile .btn-upload:hover {
    background: #1976D2;
}

.page-myprofile .file-input {
    display: none;
}

.page-myprofile .form-group {
    margin-bottom: 20px;
}

.page-myprofile .form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.page-myprofile .form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.page-myprofile .form-input:focus {
    border-color: #2196F3;
    outline: none;
}

.page-myprofile .btn-save {
    background: #4CAF50;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s ease;
}

.page-myprofile .btn-save:hover {
    background: #45a049;
}

.page-myprofile .btn-save:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

.page-myprofile .message {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

.page-myprofile .message-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.page-myprofile .message-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.page-myprofile .avatar-edit-tools {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.page-myprofile .btn-remove-avatar {
    background: #ff4444;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.3s ease;
}

.page-myprofile .btn-remove-avatar:hover {
    background: #cc0000;
}

.page-myprofile .crop-preview {
    max-width: 300px;
    margin: 10px auto;
    border: 2px dashed #ddd;
    display: none;
}

/* myfavor.aspx 页面样式 */
.page-myfavor .favorites-container {
    padding: 10px;
    display: block !important;
}

.page-myfavor .favorite-user-item {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-myfavor .user-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.page-myfavor .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}

.page-myfavor .user-details {
    flex: 1;
}

.page-myfavor .user-name {
    font-weight: bold;
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
}

.page-myfavor .user-id {
    color: #666;
    font-size: 12px;
}

.page-myfavor .action-buttons {
    display: flex;
    gap: 18px;
}

.page-myfavor .view-predictions {
    background: #2196F3;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.page-myfavor .unfollow-button {
    background: #ff4444;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.page-myfavor .view-predictions:hover {
    background: #1976D2;
    transform: scale(1.1);
}

.page-myfavor .unfollow-button:hover {
    background: #cc0000;
    transform: scale(1.1);
}

.page-myfavor .tooltip {
    position: relative;
}

.page-myfavor .tooltip:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.page-myfavor .load-more-container {
    text-align: center;
    padding: 20px;
}

.page-myfavor .load-more-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-myfavor .load-more-button:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.page-myfavor .load-more-button:disabled {
    background: #cccccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.page-myfavor .loading-text {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

/* myactivity.aspx 页面样式 */
.page-myactivity .load-more-container {
    text-align: center;
    padding: 20px;
}

.page-myactivity .load-more-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-myactivity .load-more-button:hover {
    background: #45a049;
}

.page-myactivity .load-more-button:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

.page-myactivity .loading-text {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

/* responsieve */
@media (max-width: 768px) {
    .page-myprofile .profile-container {
        padding: 15px 10px;
    }
    
    .page-myfavor .favorite-user-item {
        padding: 12px;
    }
    
    .page-myfavor .action-buttons {
        gap: 12px;
    }
    
    .page-myfavor .view-predictions,
    .page-myfavor .unfollow-button {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}



/* challenges Page Popup layer styles change */
.popup-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.team-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.team-name {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #333;
}

.vs-text {
    font-size: 14px;
    
    color: #666;
    margin: 0 15px;
}

.save-prediction {
    padding: 12px 40px;
    font-size: 16px;
   
    border-radius: 5px;
    cursor: pointer;
}


/* challenge ranking container */
.ranking-list-container {
    max-height: 680px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 10px 0;
}

.ranking-list-container::-webkit-scrollbar {
    width: 6px;
}

.ranking-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.ranking-list-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.ranking-list-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

@media (max-width: 768px) {
    .ranking-list-container {
        max-height: 680px;
    }
}

@media (max-width: 480px) {
    .ranking-list-container {
        max-height: 500px;
    }
}


/* stop challenge link */
.stop-challenge-section {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
}

.stop-challenge-link {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    display: inline-block;
}

.stop-challenge-link:hover {
    background-color: #e9ecef;
    color: #495057;
    text-decoration: none;
}

.stop-challenge-link:active {
    background-color: #dee2e6;
}

/* next styles */