/* 自定义样式 - 用户个人中心页面优化 */

/* 页面背景色 */
body {
    background: #f0f2f5 !important;
}

.main {
    background: #f0f2f5 !important;
    padding-top: 45px !important;
}

body.index {
    background: #f0f2f5 !important;
    padding-top: 0 !important;
}

/* 1. 头部蓝色渐变背景 */
.header {
    background: linear-gradient(135deg, #4C8BF5 0%, #6BA3FF 100%) !important;
    background-color: #4C8BF5 !important;
}

/* 底部导航栏也使用相同的蓝色渐变 */
.ul-tabbar {
    background: linear-gradient(135deg, #4C8BF5 0%, #6BA3FF 100%) !important;
    background-color: #4C8BF5 !important;
}

/* 2. 钱包连接按钮样式 */
.wallet-connect {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wallet-connect:hover {
    background: rgba(255, 255, 255, 0.3);
}

.wallet-connect.connected {
    background: rgba(30, 58, 138, 0.85);
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
}

.wallet-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 5px;
}

.wallet-address {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

/* 轮播图样式优化 */
.banner {
    padding: 10px 12px;
    background: transparent !important;
}

.banner .slick-slide {
    padding: 0;
}

/* 隐藏轮播图数字，只显示圆点 */
.slick-dots {
    bottom: 20px !important;
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0 !important;
    line-height: 0 !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: transparent !important;
    border: 0 !important;
    outline: none !important;
    background: rgba(255,255,255,0.5) !important;
    border-radius: 50% !important;
}

.slick-dots li button:before {
    content: '' !important;
    display: none !important;
}

.slick-dots li.slick-active button {
    background: #4C8BF5 !important;
    opacity: 1 !important;
}

/* 轮播图卡片圆角 */
.banner .item {
    border-radius: 15px !important;
    overflow: hidden;
}

/* 4. 公告样式优化 */
.m-notice {
    background: #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 8px 15px !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: -15px !important;
    margin-bottom: 20px !important;
}

.m-notice .icon {
    width: 18px !important;
    height: 29px !important;
    margin-right: 10px !important;
    filter: brightness(0.5);
}

.m-notice .notice {
    font-size: 13px;
    font-weight: 400;
    color: #333;
}

.m-notice marquee {
    font-weight: 500;
}

/* 5. 推荐赛事卡片优化 */
.ul-info .con {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e8e8e8 !important;
    overflow: hidden;
    display: block !important;
}

.ul-info .info {
    width: 100% !important;
    color: #333 !important;
}

.ul-info .info .league-title {
    padding-left: 50px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    margin-bottom: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #4C8BF5 !important;
}

.ul-info .info .top {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.ul-info .info .top span {
    background: #f0f2f5 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #666 !important;
}

.ul-info .info .top span em {
    color: #4C8BF5 !important;
    font-weight: 600 !important;
}

.ul-info .info .date {
    font-weight: 500;
    margin: 5px 0;
    color: #666 !important;
    font-size: 13px !important;
}

.ul-info .info .bot {
    color: #666 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

.ul-info .info .bot em {
    color: #4C8BF5 !important;
}

/* 6. 新闻公告卡片优化 */
.news-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.news-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.news-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234C8BF5"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 8px;
}

.news-badge {
    background: #4C8BF5;
    color: #fff;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.news-content {
    color: #333;
}

.news-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
    color: #333;
}

.news-date {
    display: flex;
    align-items: center;
    font-size: 12px;
    opacity: 0.9;
}

.date-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>') center center no-repeat;
    background-size: contain;
    margin-right: 5px;
}

/* 标签页样式优化 */
.ul-tabs_b1 {
    margin-bottom: 15px !important;
}

/* 推荐赛事和新闻公告标签统一样式 */
.ul-tabs_b1 li a {
    color: #666 !important;
    transition: all 0.3s ease;
}

.ul-tabs_b1 li.on a {
    color: #4C8BF5 !important;
    font-weight: bold !important;
}

.ul-tabs_b1 li.on a::after {
    background: linear-gradient(90deg, #4C8BF5 0%, #6BA3FF 100%) !important;
    box-shadow: 0 2px 8px rgba(76, 139, 245, 0.5);
    height: 3px !important;
}

/* 移除旧的新闻样式 */
.ul-news .pic,
.ul-news .txt {
    display: block !important;
}

.ul-news .pic {
    display: none !important;
}

.ul-news li {
    margin-bottom: 0 !important;
}

.ul-news .con {
    display: block !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 移除slick_tab的混乱背景 */
.slick_tab {
    background: transparent !important;
}

.slick_tab .tab_con {
    background: transparent !important;
}

/* 确保内容区域背景透明 */
.wp {
    background: transparent !important;
}

/* 标签页区域背景 */
.ul-tabs_b1 {
    background: transparent !important;
}

/* 响应式优化 */
@media (max-width: 375px) {
    .wallet-connect {
        padding: 4px 8px;
    }
    
    .wallet-icon {
        width: 16px;
        height: 16px;
    }
    
    .wallet-address {
        font-size: 11px;
    }
    
    .news-title {
        font-size: 14px;
    }
}

/* 额外的蓝色主题优化 */
.main {
    background: #f0f2f5 !important;
}

body {
    background: #f0f2f5 !important;
}

/* frod Cup 区域蓝色主题 */
.slick_tab_btn {
    background: transparent !important;
}

/* 统一按钮和链接的蓝色主题 */
a {
    transition: all 0.3s ease;
}

/* 滚动条美化（仅支持 Webkit 浏览器） */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #4C8BF5;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3d7ae0;
}



/* 卡片统一间距 */
.ul-info li,
.ul-news li {
    padding: 0 !important;
}

/* 成交量圆环边框颜色优化 */
.ul-info .pic.pic1 {
    border-color: #FF6B6B !important;
}

.ul-info .pic.pic2 {
    border-color: #51CF66 !important;
}

.ul-info .pic.pic3 {
    border-color: #FFD700 !important;
}

/* 赛事页面白色卡片样式 */
.ul-tabh1 li {
    margin-bottom: 15px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ul-tabh1 li .con {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border: none !important;
    padding: 15px !important;
    height: auto !important;
    min-height: 83px !important;
}

.ul-tabh1 li .top p {
    color: #666 !important;
}

.ul-tabh1 li .top .p1 {
    color: #4C8BF5 !important;
    font-weight: 600 !important;
}

.ul-tabh1 li .bom .item {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.ul-tabh1 li .bom .vs {
    color: #4C8BF5 !important;
}

/* 赛事页面标签样式-蓝色主题并向上移动 */
.ul-tab-hs {
    border-bottom: 1px solid #4C8BF5 !important;
    margin-top: -10px !important;
    margin-bottom: 15px !important;
}

.ul-tab-hs li a {
    color: #666 !important;
    transition: all 0.3s ease;
}

.ul-tab-hs li.on a {
    color: #4C8BF5 !important;
    font-weight: bold !important;
}

.ul-tab-hs li.on a:after {
    background: #4C8BF5 !important;
    height: 3px !important;
}

/* 赛事名称背景logo样式 */
.ul-tabh1 li .bom .p1 {
    padding-left: 50px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    margin-bottom: 8px !important;
}

/* 各联赛logo背景 */
.league-logo-dga {
    background-image: url('/static/icon/dga.png') !important;
}

.league-logo-xga {
    background-image: url('/static/icon/xga.png') !important;
}

.league-logo-iga {
    background-image: url('/static/icon/iga.png') !important;
}

.league-logo-yga {
    background-image: url('/static/icon/yga.png') !important;
}

.league-logo-fga {
    background-image: url('/static/icon/fga.png') !important;
}

.league-logo-wc26 {
    background-image: url('/static/icon/wc26.png') !important;
}

/* 投注页面样式 */
body.betting-page {
    background: #f0f2f5 !important;
}

.betting-page .main {
    background: #f0f2f5 !important;
}

/* 投注页面卡片样式 */
.betting-page .m-vs {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 10px 12px !important;
    padding: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

.betting-page .ul_tab_l1 {
    background: #ffffff !important;
    margin: 10px 12px !important;
    border-radius: 12px !important;
    padding: 10px 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.betting-page .ul_tab_l1 li.on a {
    color: #4C8BF5 !important;
    font-weight: bold !important;
}

.betting-page .m-table {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 10px 12px !important;
    padding: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

.betting-page .table {
    background: #ffffff !important;
}

.betting-page .table thead {
    background: #f8f9fa !important;
}

.betting-page .table thead th {
    color: #333 !important;
    font-weight: 600 !important;
}

.betting-page .table tbody tr {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f5 !important;
}

.betting-page .table tbody tr:hover {
    background: #f8f9fa !important;
}

.betting-page .table tbody td {
    color: #333 !important;
}

/* 立即投注按钮样式 */
.bet-btn {
    background: linear-gradient(135deg, #4C8BF5 0%, #6BA3FF 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(76, 139, 245, 0.3) !important;
}

.bet-btn:hover {
    background: linear-gradient(135deg, #3d7ae0 0%, #5a92ef 100%) !important;
    box-shadow: 0 4px 8px rgba(76, 139, 245, 0.4) !important;
    transform: translateY(-1px) !important;
}

.bet-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(76, 139, 245, 0.3) !important;
}

/* 选中行样式 */
.betting-page .table tbody tr.biaoshi {
    background: #e3f2fd !important;
    border-left: 3px solid #4C8BF5 !important;
}

/* AI投注页面样式 */
body.ai-bet-page {
    background: #f0f2f5 !important;
}

.ai-bet-page .main {
    background: #f0f2f5 !important;
    padding-top: 50px !important;
}

/* AI信息卡片 */
.ai-info-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 10px 12px !important;
    padding: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.ai-info-card h3 {
    color: #4C8BF5 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.ai-info-card p {
    color: #666 !important;
    line-height: 1.6 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* AI投注卡片 */
.ai-betting-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 10px 12px !important;
    padding: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.ai-betting-card h4 {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

/* 表单样式 */
.betting-form {
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    color: #666;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 500;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bet-input {
    flex: 1;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 15px;
    color: #333;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.bet-input:focus {
    outline: none;
    border-color: #4C8BF5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(76, 139, 245, 0.1);
}

.balance-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f0f2f5;
    border-radius: 8px;
    white-space: nowrap;
}

.balance-label {
    color: #999;
    font-size: 13px;
}

.balance-value {
    color: #4C8BF5;
    font-size: 15px;
    font-weight: 600;
}

/* AI托管按钮 */
.ai-delegate-btn {
    width: 100%;
    height: 46px;
    background: linear-gradient(135deg, #4C8BF5 0%, #6BA3FF 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(76, 139, 245, 0.3) !important;
}

.ai-delegate-btn:hover {
    background: linear-gradient(135deg, #3d7ae0 0%, #5a92ef 100%) !important;
    box-shadow: 0 6px 16px rgba(76, 139, 245, 0.4) !important;
    transform: translateY(-2px) !important;
}

.ai-delegate-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(76, 139, 245, 0.3) !important;
}

/* 历史投注记录卡片 */
.ai-history-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 10px 12px !important;
    padding: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.ai-history-card h4 {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.history-table {
    width: 100%;
    overflow-x: auto;
}

.history-table table {
    width: 100%;
    border-collapse: collapse;
}

.history-table thead {
    background: #f8f9fa;
    border-radius: 8px;
}

.history-table thead th {
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.history-table thead th:first-child {
    text-align: left;
    padding-left: 12px;
}

.history-table tbody tr {
    border-bottom: 1px solid #f0f2f5;
}

.history-table tbody tr:last-child {
    border-bottom: none;
}

.history-table tbody td {
    padding: 12px 8px;
    text-align: center;
    font-size: 14px;
    color: #333;
}

.history-table tbody td.event-name {
    text-align: left;
    padding-left: 12px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-table tbody td.bet-amount {
    color: #666;
}

.history-table tbody td.profit {
    font-weight: 600;
}

.history-table tbody td.profit.positive {
    color: #4CAF50;
}

.history-table tbody td.profit.negative {
    color: #F44336;
}

.history-table tbody td.empty-data {
    padding: 30px;
    text-align: center;
    color: #999;
    font-size: 13px;
}