[v-cloak] { display: none !important; }

body { 
    background-color: #f7f8fa; 
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; 
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.app-container { height: 100vh; }
.app-main-layout { display: flex; flex-direction: column; height: 100vh; }
.content-area { flex: 1; overflow-y: auto; padding-bottom: calc(90px + env(safe-area-inset-bottom)); box-sizing: border-box; }

/* ================= 登录界面专用 ================= */
.captcha-box { background: #fff; padding: 15px; border-radius: 8px; margin-top: 15px; border: 1px solid #ebedf0; }
.captcha-icons { font-size: 24px; letter-spacing: 5px; text-align: center; margin-bottom: 10px; }

/* ================= 赛事列表页面卡片 ================= */
.match-card { margin: 12px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; transition: background-color 0.2s; }
.match-card:active { background-color: #f2f3f5; }
.match-name-title { text-align: center; font-size: 14px; color: #1989fa; padding: 12px 10px 0 10px; font-weight: bold; } /* 需求1：首页赛事名称 */
.match-header { padding: 10px 16px; border-bottom: 1px solid #f2f3f5; text-align: center; font-weight: bold; font-size: 16px; }
.match-vs { color: #969799; font-size: 14px; margin: 0 10px; }
.match-time { padding: 10px 16px; font-size: 13px; color: #666; text-align: center; }
.time-sale { color: #969799; margin-bottom: 4px; font-weight: 500; }
.time-play { color: #969799; font-weight: 500; }
.time-sale.text-success { color: #07c160; font-weight: bold; }
.time-play.text-warning { color: #ff976a; font-weight: bold; }

/* ================= 详情页顶部高级托盘卡片 ================= */
.detail-header-card { background: linear-gradient(to bottom, #f5f7fa, #ffffff); border-radius: 16px; padding: 25px 20px; margin: 15px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid #edf0f5; }
.large-score-display { font-size: 34px; font-weight: 900; color: #323233; text-align: center; margin-bottom: 12px; letter-spacing: 2px; } /* 需求4：顶部大比分 */
.detail-vs-row { display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: bolder; color: #333; margin-bottom: 20px; }
.detail-vs-text { margin: 0 15px; color: #999; font-size: 15px; font-weight: normal; }
.detail-time-text { font-size: 14px; color: #666; margin-bottom: 10px; }

.status-pill { display: inline-block; padding: 5px 16px; border-radius: 20px; font-size: 13px; font-weight: bold; margin-top: 5px; }
.status-pill.blue { background: #eef3ff; color: #1989fa; }
.status-pill.green { background: #e6f8ea; color: #07c160; }
.status-pill.orange { background: #fff0e8; color: #ff976a; }

/* ================= 盘口区块设定 ================= */
.odds-group { margin: 12px; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.odds-group-title { font-size: 14px; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; color: #323233; }
.odds-group-title i { margin-right: 5px; font-style: normal; }

.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-box { background: #f7f8fa; border: 1px solid #ebedf0; border-radius: 8px; padding: 12px 10px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; box-sizing: border-box; }
.opt-box.selected { background: #eff2ff !important; border-color: #1989fa !important; border-width: 2px; }
.opt-box:active { background: #ebedf0; }
.opt-left { display: flex; flex-direction: column; text-align: left; align-items: flex-start; }

.opt-name { font-size: 14.5px; color: #1a1a1a; font-weight: 800; }
.opt-hc { font-size: 11px; color: #1989fa; background: #eef3ff; padding: 2px 6px; border-radius: 4px; margin-top: 5px; display: inline-block; border: 1px solid #d0e1fd; font-weight: bold; }
.opt-odds { font-size: 16px; color: #ee0a24; font-weight: bold; }

/* ================= 波胆网格 & 分块布局 ================= */
.bodan-grid { grid-template-columns: repeat(3, 1fr); }
.bodan-grid .opt-box { flex-direction: column; justify-content: center; padding: 10px 5px; text-align: center; }
.bodan-grid .opt-odds { margin-top: 4px; }
.bodan-name-exact { font-size: 14px; color: #1a1a1a; font-weight: 600; background-color: #f0f0f0; padding: 2px 8px; border-radius: 4px; margin-bottom: 2px; }
.bodan-odds-big { font-size: 17px; color: #ee0a24; font-weight: bold; }
.bodan-odds-small { font-size: 17px; color: #e67e22; font-weight: bold; }

/* 需求3：主客场切分布局 */
.bodan-split-layout { display: flex; align-items: stretch; margin-top: 5px; }
.bodan-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.left-col { padding-right: 10px; border-right: 1px dashed #c8c9cc; }
.right-col { padding-left: 10px; }
.bodan-box { flex-direction: row !important; justify-content: space-between; padding: 10px 12px; }

/* ================= 底部下注弹窗 ================= */
.bet-popup { padding: 20px 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.bet-summary { font-size: 14px; color: #666; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #ebedf0; }
.bet-summary span { color: #323233; font-weight: bold; }
.bet-input-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.bet-input { flex: 1; background: #f7f8fa; border: 1px solid #ebedf0; border-radius: 6px; padding: 10px; font-size: 16px; outline: none; transition: 0.2s border-color; }
.bet-input:focus { border-color: #1989fa; background: #fff; }
.bet-btn { width: 100px; height: 44px; background: #1989fa; color: white; border: none; border-radius: 6px; font-weight: bold; font-size: 16px; }
.bet-btn:active { opacity: 0.8; }

.van-tabbar--fixed { z-index: 100; }

/* ================= 个人中心专用 ================= */
.profile-header-card { background: linear-gradient(135deg, #1989fa, #005cbf); border-radius: 16px; padding: 35px 20px; margin: 15px; text-align: center; box-shadow: 0 8px 20px rgba(25, 137, 250, 0.3); color: white; }
.profile-username { font-size: 22px; font-weight: bold; margin-bottom: 20px; }
.profile-balance-title { font-size: 14px; opacity: 0.8; margin-bottom: 5px; }
.profile-balance-val { font-size: 36px; font-weight: bold; font-family: monospace; }

/* ================= 我的订单 ================= */
.order-card { background: #fff; margin: 12px 16px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); overflow: hidden; border: 1px solid #ebedf0; }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; background: #fafafa; border-bottom: 1px solid #ebedf0; }
.order-title-box { display: flex; flex-direction: column; flex: 1; padding-right: 10px; }

.order-time-info { font-size: 12.5px; color: #969799; display: flex; align-items: center; }
.order-match-name { font-size: 15.5px; font-weight: 800; color: #323233; margin: 5px 0; letter-spacing: 0.5px; }

.order-status { font-size: 14px; font-weight: bold; text-align: right; white-space: nowrap; margin-top: 2px;}
.status-0 { color: #ff976a; } /* 待开奖 */
.status-1 { color: #07c160; } /* 中奖 */
.status-2 { color: #969799; } /* 未中奖 */
.status-3 { color: #1989fa; } /* 已派奖 */
.win-amt { font-size: 13px; margin-top: 6px; color: #ee0a24; font-weight: 800; background: #fff0f0; padding: 2px 6px; border-radius: 4px;}

.order-body { padding: 14px 16px; font-size: 14px; color: #666; }
.order-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.order-row:last-child { margin-bottom: 0; }
.order-row .lbl { color: #969799; }
.order-row .val { font-weight: bold; color: #323233; }
.order-row .text-primary { color: #1989fa; font-size: 15px; }
.order-row .text-danger { color: #ee0a24; font-size: 15px; }
/* ================= 新增：报表专用样式 ================= */
.report-table-card {
    background: #fff;
    margin: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #ebedf0;
    overflow: hidden;
}

.report-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.report-tr {
    display: grid;
    /* 占比划分：日期2 | 注数1 | 下注额1.5 | 返水1 | 盈亏1.5 */
    grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
    text-align: center;
    align-items: center;
    border-bottom: 1px solid #f2f3f5;
}
.report-tr:last-child {
    border-bottom: none;
}

.report-th {
    background: #fafafa;
    padding: 12px 5px;
    font-size: 13px;
    font-weight: bold;
    color: #323233;
}

.report-row {
    padding: 12px 5px;
    font-size: 13.5px;
    transition: background-color 0.2s;
}
.report-row:active {
    background-color: #f2f3f5;
}

.report-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font-bold { font-weight: bold; }
.text-primary { color: #1989fa; }
/* 报表：盈余红色，亏损绿色 (符合中国常见交易习惯) */
.text-danger { color: #ee0a24; }
.text-success { color: #07c160; }

/* ================= 封盘状态专属样式 ================= */
.opt-box {
    position: relative; /* 确保水印能在盒子内绝对定位 */
    overflow: hidden;   /* 防止水印文字超出盒子边缘 */
}

/* 封盘变灰效果 */
.opt-box.locked {
    background-color: #f2f3f5 !important;
    border-color: #ebedf0 !important;
    cursor: not-allowed;
}

.opt-box.locked * {
    opacity: 0.45; /* 内部原有的文字与赔率变淡，突出封盘水印 */
}

/* 拦截原生点击时的颜色反馈 */
.opt-box.locked:active {
    background-color: #f2f3f5 !important; 
}

/* 135°对角线水印样式 */
.locked-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    /* -45度旋转对应视觉上的 135° 左下到右上对角线效果 */
    transform: translate(-50%, -50%) rotate(-15deg); 
    font-size: 15px;
    color: rgba(0, 0, 0, 0.25); /* 浅灰色半透明大文字 */
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none; /* 让水印彻底变成虚影，不阻挡点击和任何鼠标事件 */
    z-index: 10;
    letter-spacing: 2px;
    opacity: 1 !important; /* 强制水印自身不继承透明度 */
}