.x8-card { background: #fff; border: 1px solid #e7ebf0; border-radius: 8px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.x8-card-hd { position: relative; text-align: center; font-weight: 600; color: #3b4a5a; background: linear-gradient(#f8fafc, #eef2f7); border-bottom: 1px solid #e7ebf0; border-radius: 8px 8px 0 0; padding: 12px 14px; font-size: 14px; }
.x8-card-bd { padding: 18px 26px; }
.x8-card-bd.tight { padding: 12px 14px; }




.x8-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2px 30px; }


.x8-fi { display: flex; align-items: center; padding: 8px 0; min-width: 0; }
.x8-fi.full { grid-column: 1 / -1; }
.x8-fi > .x8-lbl { width: 150px; text-align: right; color: #6b7683; padding-right: 14px; flex: none; font-size: 13px; }
.x8-fi .x8-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.x8-ipt { height: 36px; line-height: 36px; border: 1px solid #dce1e6; border-radius: 5px; padding: 0 11px; color: #333; outline: none; box-sizing: border-box; font-size: 13px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.x8-ipt:focus { border-color: var(--main-color); box-shadow: 0 0 0 2px rgba(var(--main-color-rgb), .12); }
.x8-ipt[disabled], .x8-ipt[readonly] { background: #f5f7fa; color: #98a2ae; cursor: not-allowed; }

.x8-ipt[type=number] { -moz-appearance: textfield; }
.x8-ipt[type=number]::-webkit-outer-spin-button, .x8-ipt[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select.x8-ipt { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238a95a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; }
select.x8-ipt:hover { border-color: #b9c2cc; }
.x8-w-main { width: 190px; max-width: 100%; min-width: 0; }
.x8-w-mini { width: 64px; text-align: center; }
.x8-w-full { width: 100%; }
.x8-unit { color: #6b7683; font-size: 13px; white-space: nowrap; }
.x8-hint { color: var(--danger-color); font-size: 12px; white-space: nowrap; }
.x8-req::before { content: "*"; color: var(--danger-color); margin-right: 3px; }
.x8-radio { display: inline-flex; align-items: center; gap: 5px; margin-right: 22px; cursor: pointer; color: #465060; font-size: 13px; }

.x8-radio input { accent-color: var(--main-color); width: 16px; height: 16px; margin: 0; flex: none; }
.x8-checks { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.x8-check-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: #465060; font-size: 13px; }
.x8-check-item input { accent-color: var(--main-color); width: 15px; height: 15px; margin: 0; }


.x8-ipt.x8-invalid { border-color: var(--danger-color); }
.x8-invalid-tip { color: var(--danger-color); font-size: 12px; }


.x8-sw { position: relative; display: inline-block; width: 46px; height: 24px; flex: none; }
.x8-sw input { display: none; }
.x8-sw .track { position: absolute; inset: 0; background: #cfd6dd; border-radius: 24px; transition: .2s; cursor: pointer; }
.x8-sw .track:before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }


.x8-sw input:checked + .track { background: var(--main-color); background: color-mix(in srgb, var(--main-color) 75%, #fff); }
.x8-sw input:checked + .track:before { transform: translateX(22px); }
.x8-sw input:disabled + .track { opacity: .55; cursor: not-allowed; }


.x8-img { display: inline-flex; align-items: center; gap: 10px; }
.x8-img .x8-img-prev { width: 40px; height: 40px; border: 1px solid #e7ebf0; border-radius: 6px; background: #f7f9fb; object-fit: contain; }
.x8-img .x8-img-pick { margin: 0; }


.x8-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid #e7ebf0; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.x8-filter .x8-ipt { height: 32px; line-height: 32px; }
.x8-filter-item { display: inline-flex; align-items: center; gap: 6px; }
.x8-filter-lbl { color: #6b7683; font-size: 13px; }

.x8-filter-ops { display: flex; gap: 8px; margin-left: 6px; }


.x8-quota { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 10px 14px; margin-bottom: 10px; background: #f7f8fa; border: 1px solid #e7ebf0; border-radius: 6px; font-size: 13px; }
.x8-quota-i { display: inline-flex; align-items: baseline; gap: 6px; }
.x8-quota-i em { font-style: normal; color: #6b7683; }
.x8-quota-i b { color: var(--main-color); font-size: 15px; }



.x8-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid #e7ebf0; }
.x8-tabs .x8-tab { flex: none; white-space: nowrap; padding: 9px 18px; font-size: 14px; color: #6b7683; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s; }
.x8-tabs .x8-tab:hover { color: var(--main-color); }
.x8-tabs .x8-tab.on { color: var(--main-color); font-weight: 600; border-bottom-color: var(--main-color); }

.x8-tabs-sub { border-bottom: none; margin-bottom: 8px; gap: 6px; }
.x8-tabs-sub .x8-tab { padding: 4px 14px; font-size: 13px; border-bottom: none; border-radius: 14px; background: #f2f4f7; margin-bottom: 0; }
.x8-tabs-sub .x8-tab.on { background: var(--main-color); color: #fff; }


.x8-tb-wrap { background: #fff; border: 1px solid #e7ebf0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.x8-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.x8-tb th { background: #f6f8fc; color: #5a6684; font-weight: 600; padding: 8px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid #eef1f5; }
.x8-tb td { padding: 7px 10px; text-align: center; border-bottom: 1px solid #eef1f5; color: #333; }
.x8-tb tbody tr:last-child td { border-bottom: 0; }
.x8-tb tbody tr:nth-child(even) { background: #fafbfd; }
.x8-tb tbody tr:hover { background: rgba(var(--main-color-rgb), .06); }


.x8-tb tbody tr.x8-sum td { background: #f6f8fc; font-weight: 600; }
.x8-tb tbody tr.x8-sum td, .x8-tb tbody tr.x8-sum td * { color: var(--danger-color, #e54d42) !important; }
.x8-tb .x8-op { color: var(--main-color); cursor: pointer; margin: 0 6px; }
.x8-tb .x8-op:hover { opacity: .66; }


.x8-tb td [data-action]:not(.x8-op) { color: var(--main-color); cursor: pointer; transition: opacity .15s; }
.x8-tb td [data-action]:not(.x8-op):hover { opacity: .66; }
.x8-tb td [data-action].x8-ro { color: #b9c0cc; cursor: not-allowed; }


.x8-tb td.x8-cell-drill { padding: 0; height: 1px; }
.x8-tb td.x8-cell-drill > span { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 7px 10px; box-sizing: border-box; }


.x8-pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 0 4px; font-size: 13px; color: #6b7683; }
.x8-pager button { height: 30px; min-width: 30px; padding: 0 10px; border: 1px solid #e2e6ee; background: #fff; border-radius: 5px; color: #465060; cursor: pointer; transition: all .15s; }
.x8-pager button:hover:not(:disabled) { border-color: var(--main-color); color: var(--main-color); }
.x8-pager button:disabled { color: #c0c6cf; cursor: not-allowed; background: #f7f8fa; }
.x8-pager .cur { color: var(--main-color); font-weight: 600; }
.x8-pager select { height: 30px; border: 1px solid #e2e6ee; border-radius: 5px; padding: 0 6px; color: #465060; cursor: pointer; }


.x8-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 46px 20px; color: #98a2ae; font-size: 14px; }
.x8-state i { font-size: 34px; color: #ccd3dc; }
.x8-state .x8-state-act { color: var(--main-color); cursor: pointer; font-size: 13px; }
.x8-state-cell { text-align: center; color: #98a2ae; padding: 34px 10px; }

.x8-state-tip { color: #98a2ae; font-size: 13px; padding: 10px 8px; }
.x8-state-err i { color: #f0a3a3; }


.x8-spin { width: 26px; height: 26px; border: 2px solid #e6eaf0; border-top-color: var(--main-color); border-radius: 50%; animation: x8spin .7s linear infinite; }
@keyframes x8spin { to { transform: rotate(360deg); } }


.x8-cell-loading { display: inline-flex; align-items: center; gap: 7px; }
.x8-spin-sm { display: inline-block; width: 14px; height: 14px; border: 2px solid #e6eaf0; border-top-color: var(--main-color); border-radius: 50%; animation: x8spin .7s linear infinite; }




.x8-ball { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #8d95a3; color: #fff; font-size: 13px; font-weight: 600; margin: 0 2px; vertical-align: middle; }
.x8-ball-red { background: radial-gradient(circle at 34% 28%, #ff7a68, #d0271a); }
.x8-ball-blue { background: radial-gradient(circle at 34% 28%, #6bb6ff, #1565c0); }
.x8-ball-green { background: radial-gradient(circle at 34% 28%, #7cd992, #2e7d32); }
.x8-ball-sm { width: 22px; height: 22px; font-size: 11px; }

.x8-ball-xs { width: 18px; height: 18px; font-size: 10px; margin: 1px; }
.x8-ball-lg { width: 36px; height: 36px; font-size: 15px; }
.x8-ball-plus { color: #98a2ae; margin: 0 4px; }

.x8-ball-zodiac { display: inline-flex; flex-direction: row; align-items: center; gap: 3px; margin: 0 3px; }
.x8-ball-zodiac em { font-style: normal; font-size: 14px; color: #333; }
.x8-zodiac { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #f2f5f9; color: #5a6684; font-size: 12px; }


.x8-bd-card { margin-bottom: 10px; }
.x8-bd-card .x8-card-hd { text-align: left; font-size: 13px; padding: 9px 14px; }

tr.x8-bd-lock td { background: #fafbfd; }

.x8-bd-label { font-weight: 600; color: #465060; font-size: 13px; }
.x8-bd-zo { font-style: normal; font-size: 11px; color: #6b7683; margin-left: 3px; }
.x8-bd-odds { font-weight: 600; color: var(--main-color); font-size: 14px; }
.x8-bd-oddsbox { display: inline-flex; align-items: center; gap: 4px; }
.x8-bd-step { width: 18px; height: 18px; line-height: 1; padding: 0; border: 1px solid #dce1e6; background: #fff; border-radius: 4px; color: #6b7683; cursor: pointer; font-size: 13px; }
.x8-bd-step:hover { border-color: var(--main-color); color: var(--main-color); }
.x8-bd-flat { color: #98a2ae; }
.x8-bd-up { color: var(--ok-color); font-weight: 600; }
.x8-bd-down { color: var(--danger-color); font-weight: 600; }
.x8-bd-tbwrap { box-shadow: none; }
.x8-bd-td-item { text-align: left !important; }
.x8-bd-num { text-align: right !important; }
.x8-bd-td-nums { text-align: left !important; }


.x8-bd-drill { cursor: pointer; }
.x8-bd-amt { color: var(--ok-color); font-weight: 600; }


.x8-bd-head .x8-card-bd { color: #6b7683; font-size: 13px; }
.x8-bd-head b { font-weight: normal; color: #3b4a5a; }
.x8-bd-head b.x8-bd-up, .x8-bd-head b.x8-bd-down { font-weight: 600; }

.x8-bd-live { font-size: 12px; padding: 2px 9px; border-radius: 10px; color: #8a95a1; background: #f1f3f5; }
.x8-bd-live.on { color: var(--ok-color); background: rgba(82, 196, 26, .1); }
.x8-bd-live.off { color: var(--danger-color); background: rgba(229, 77, 66, .1); }

.x8-bd-use { font-style: normal; font-size: 11px; font-weight: normal; color: #8a95a1; margin-left: 4px; }
.x8-bd-use.warn { color: var(--warn-color); }
.x8-bd-use.full { color: var(--danger-color); }
.x8-bd-over { font-style: normal; color: var(--danger-color); font-weight: 600; }


.x8-cellstack { display: flex; flex-direction: column; gap: 1px; line-height: 1.5; }
.x8-cellstack i { font-style: normal; font-size: 12px; color: #98a2b3; }




.layui-layer-title {
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  height: auto; line-height: 1.6; padding: 10px 60px 10px 15px;
}

.x8-statline { display: flex; gap: 26px; flex-wrap: wrap; padding: 6px 0 2px; font-size: 13px; color: #5a6478; }
.x8-statline b { color: #303a4b; font-weight: 600; }

.x8-tb td.x8-col-even, .x8-tb th.x8-col-even { width: 92px; max-width: 92px; }


.x8-tb td.x8-col-item, .x8-tb th.x8-col-item { width: 260px; max-width: 260px; }
.x8-item { max-width: 100%; }
.x8-item .x8-item-h { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-item i { white-space: nowrap; }

.x8-item-line { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.x8-chain { cursor: default; }
.x8-chain .x8-chain-n {
  font-style: normal; font-size: 11px; color: #fff; background: #9aa6b6;
  border-radius: 8px; padding: 0 5px; margin-left: 4px; line-height: 16px; display: inline-block;
}


.x8-chain-pop {
  display: none; position: fixed; z-index: 2147483000; background: #fff; color: #3b4a5a;
  border: 1px solid #dce1e6; border-radius: 4px; box-shadow: 0 4px 16px rgba(20, 40, 80, .16);
  padding: 6px; font-size: 12px; user-select: text;
}
.x8-chain-pop table { border-collapse: collapse; }
.x8-chain-pop th, .x8-chain-pop td { padding: 3px 10px 3px 6px; text-align: left; white-space: nowrap; }
.x8-chain-pop th { color: #8a95a5; font-weight: 400; border-bottom: 1px solid #edf0f5; }

.x8-chain-cp {
  margin-left: 6px; font-size: 11px; color: var(--main-color, #1e9fff); cursor: pointer; user-select: none;
}
.x8-chain-cp:hover { text-decoration: underline; }

.x8-bd-tierline { display: block; }


.x8-bd-cbtabs { display: flex; margin-bottom: 4px; }
.x8-bd-cbtab:first-child { border-top-left-radius: 4px; }
.x8-bd-cbtab:last-child { border-top-right-radius: 4px; }

.x8-bd-cbtab { width: 102px; height: 32px; line-height: 32px; box-sizing: border-box; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #e4e9f7; color: #3b4a5a; }
.x8-bd-cbtab:hover { color: var(--main-color); }
.x8-bd-cbtab.on { background: var(--main-color); color: #fff; cursor: default; }
.x8-bd-cbtabgrp { display: flex; }

.x8-bd-cbquick { height: 32px; line-height: 32px; box-sizing: border-box; padding: 0 16px; margin-left: auto;
  border-radius: 4px 4px 0 0; background: #e4e9f7; color: #3b4a5a; font-size: 13px; font-weight: 600; cursor: pointer; }
.x8-bd-cbquick:hover { color: var(--main-color); }
.x8-bd-cbpick { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; font-weight: inherit; }
.x8-bd-cbpick input { margin: 0; cursor: pointer; }
.x8-bd-combos.x8-tb-wrap { border-radius: 0 !important; }
.x8-bd-combos .x8-tb { table-layout: fixed; }
.x8-bd-combos .x8-tb th { font-size: 14px; font-weight: 700; }
.x8-bd-combos .x8-tb th, .x8-bd-combos .x8-tb td { height: 24px; padding: 2px 6px !important; text-align: center !important; }
.x8-bd-combos .x8-bd-cbitems { word-break: normal; overflow-wrap: anywhere; }

.x8-bd-combos .x8-bd-cbamt .x8-bd-amt { overflow-wrap: normal; }


.x8-bd-rptag { font-style: normal; font-size: 12px; color: #f82525; margin-left: 2px; white-space: nowrap; }
.x8-bd-combos .x8-bd-cbamt .x8-bd-rptag { display: inline-block; white-space: normal; }
.x8-bd-cbprofit { color: #f82525 !important; }
.x8-bd-cbcount { font-style: normal; font-size: 12px; color: #8a95a1; margin-right: 4px; }
.x8-bd-pager { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 0 6px; font-size: 12px; color: #666; }
.x8-bd-pager > span { margin-right: 6px; }
.x8-bd-pager a { min-width: 24px; height: 22px; line-height: 20px; padding: 0 5px; box-sizing: border-box; text-align: center; cursor: pointer;
  border: 1px solid var(--bd-line, #dce1e6); background: #fff; color: #3b4a5a; }
.x8-bd-pager a:not(.on):not(.off):hover { color: var(--main-color); background: #e4e9f7; }
.x8-bd-pager a.on { background: var(--main-color); border-color: var(--main-color); color: #fff; cursor: default; }
.x8-bd-pager a.off { color: #c0c6cc; cursor: default; }
.x8-bd-pager i { font-style: normal; color: #98a2ae; }
@supports (background: color-mix(in srgb, red 10%, white)) {
  .x8-bd-cbtab:not(.on) { background: color-mix(in srgb, var(--main-color) 26%, #fff); }
  .x8-bd-cbtab:not(.on):hover { background: color-mix(in srgb, var(--main-color) 36%, #fff); }
  .x8-bd-cbquick { background: color-mix(in srgb, var(--main-color) 26%, #fff); }
  .x8-bd-cbquick:hover { background: color-mix(in srgb, var(--main-color) 36%, #fff); }
  .x8-bd-pager a:not(.on):not(.off):hover { background: color-mix(in srgb, var(--main-color) 12%, #fff); }
}




.x8-bd-split { display: flex; align-items: flex-start; gap: 8px; }
.x8-bd-split > .x8-bd-board { flex: 1 1 auto; min-width: 0; }

.x8-bd-split > .x8-bd-aside { flex: 0 0 600px; max-width: 600px; }
.x8-bd-aside .x8-bd-card { margin: 0; }


.x8-bd-rknum { font-weight: 700; font-size: 13px; }
.x8-bd-rank .x8-tb th, .x8-bd-rank .x8-tb td { padding: 3px 8px !important; }
.x8-bd-rank .x8-bd-oddsbox { padding: 0 6px !important; }

.x8-bd-rank .x8-card-hd {
  text-align: center !important; color: var(--danger-color, #e54d42) !important;
  font-weight: 700; padding-left: 0 !important;
}
.x8-bd-rank .x8-card-hd::before { display: none !important; }

.x8-bd-rank .x8-card-hd { border-bottom: 1px solid var(--bd-line) !important; }
.x8-bd-empty { text-align: center !important; color: #98a2ae; padding: 28px 0 !important; }

@media (max-width: 1400px) { .x8-bd-split > .x8-bd-aside { flex-basis: 460px; max-width: 460px; } }




.x8-bd-tiers { display: flex; overflow-x: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); }
.x8-bd-tiertab { flex: 1 1 0; min-width: 120px; display: flex; align-items: stretch;
  border: 1px solid var(--bd-line, #e7ebf0); cursor: pointer; }
.x8-bd-tiertab + .x8-bd-tiertab { border-left: none; }

.x8-bd-tiertab:first-child, .x8-bd-tiertab:last-child { overflow: hidden; }
.x8-bd-tiertab:first-child { border-top-left-radius: 4px; }
.x8-bd-tiertab:last-child { border-top-right-radius: 4px; }
.x8-bd-tier, .x8-bd-tiern { padding: 6px 10px; font-size: 13px; line-height: 18px; white-space: nowrap; }



.x8-bd-tier { flex: 0 0 auto; font-weight: 600; color: #3b4a5a; background: #e4e9f7; }
.x8-bd-tiertab:hover .x8-bd-tier { color: var(--main-color); background: #d8e1f5; }
.x8-bd-tiertab.on { box-shadow: inset 0 0 0 1px var(--main-color); position: relative; z-index: 1; }
.x8-bd-tiertab.on .x8-bd-tier { background: var(--main-color); color: #fff; }
.x8-bd-tiertab.on .x8-bd-tiern { background: #eaf1fd; color: var(--main-color); font-weight: 600; }

.x8-bd-tiern { flex: 1 1 0; min-width: 40px; text-align: center; color: #6b7683; background: #fff; }







.x8-bd-secrow { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; }
.x8-bd-seccol { flex: 1 1 0; border: 1px solid var(--bd-line, #e7ebf0); }
.x8-bd-seccol .x8-bd-grid, .x8-bd-seccol .x8-bd-gcol { border: none; }

.x8-bd-seccol .x8-bd-gcol .x8-tb tbody tr:last-child td { border-bottom: none; }
.x8-bd-sechd { padding: 6px 8px; text-align: center; font-weight: 600; color: #4a5568; background: #eef0f8; border-bottom: 1px solid var(--bd-line, #e7ebf0); }

.x8-bd-sechd.x8-bd-sectab { display: flex; align-items: stretch; padding: 0; cursor: pointer; }
.x8-bd-sectab .x8-bd-tier { flex: 1 1 0; text-align: center; background: #e4e9f7; }
.x8-bd-sectab .x8-bd-tiern { font-weight: 400; }
.x8-bd-sectab:hover .x8-bd-tier { color: var(--main-color); background: #d8e1f5; }
.x8-bd-sectab.on .x8-bd-tier { background: var(--main-color); color: #fff; }
.x8-bd-sectab.on .x8-bd-tiern { background: #eaf1fd; color: var(--main-color); font-weight: 600; }
.x8-bd-seccol .x8-tb-wrap { border: none; border-radius: 0; }




.x8-bd-grid { display: flex; align-items: flex-start; gap: 4px; }
.x8-bd-gcol { flex: 1 1 0; min-width: 0; border: 1px solid var(--bd-line, #e7ebf0); }
.x8-bd-gcol table { width: 100%; }
.x8-bd-gcol .x8-tb th, .x8-bd-gcol .x8-tb td { border-right: 1px solid var(--bd-line); padding: 4px 6px; }
.x8-bd-gcol .x8-tb th:last-child, .x8-bd-gcol .x8-tb td:last-child { border-right: none; }
.x8-bd-gcol .x8-tb tbody tr:last-child td { border-bottom: 1px solid var(--bd-line); }

.x8-bd-gcol .x8-bd-td-item { width: 44px; text-align: center !important; }
.x8-bd-gcell { text-align: center !important; }


.x8-bd-smgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x8-bd-smcol { min-width: 0; }
.x8-bd-smcol + .x8-bd-smcol { border-left: 1px solid var(--bd-line, #e7ebf0); }
.x8-bd-smcol table { width: 100%; }
.x8-bd-seq { width: 46px; text-align: center !important; color: #98a2ae; font-weight: normal; }

.x8-bd-smcol .x8-tb th, .x8-bd-smcol .x8-tb td { border-right: 1px solid var(--bd-line); padding: 8px 8px; }
.x8-bd-smcol .x8-tb th:last-child, .x8-bd-smcol .x8-tb td:last-child { border-right: none; }
.x8-bd-smcol .x8-tb tbody tr:last-child td { border-bottom: 1px solid var(--bd-line); }

.x8-bd-smodds-h { text-align: center !important; }
.x8-bd-smodds { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.x8-bd-smodds .x8-bd-odds { flex: 1; text-align: center; }
.x8-bd-note { text-align: center; color: #98a2ae; font-size: 12px; padding: 0 12px 10px; }


.bd-bar { margin: 8px 5px; }
.bd-bar .hd-area { display: block; }
.x8-bd-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid #eef1f6; border-radius: 8px; padding: 8px 14px; min-height: 44px; }
.x8-bd-bar-l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #6b7683; }
.x8-bd-bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.x8-bd-play { font-size: 14px; color: #1f2d3d; }
.x8-bd-issue { color: #6b7683; }
.x8-bd-state { padding: 1px 8px; border-radius: 10px; font-size: 12px; background: rgba(82, 196, 26, .12); color: var(--ok-color); }
.x8-bd-state.closed { background: rgba(229, 77, 66, .1); color: var(--danger-color); }
.x8-bd-today b { font-weight: 600; }
.x8-bd-draw { display: flex; align-items: center; gap: 6px; }
.x8-bd-cd { color: #8a95a1; font-size: 12px; }
.x8-bd-cd b { color: #3b4a5a; font-weight: 600; }

.x8-bd-cd i { font-style: normal; }

.x8-bd-cd2 { margin-left: 10px; }

.x8-bd-await { font-style: normal; color: #e6a23c; font-weight: 600; }


.x8-bd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x8-bd-step-box { display: inline-flex; align-items: center; gap: 4px; }
.x8-bd-step-box .lbl { font-size: 13px; color: #6b7683; margin-right: 2px; }
.x8-bd-step-box .x8-ipt { width: 72px; text-align: center; }
.x8-bd-quick { min-width: 40px; padding: 0 10px; border: 1px solid #dce1e6; background: #fff; border-radius: 5px; color: #465060; cursor: pointer; font-size: 13px; }
.x8-bd-quick:hover { border-color: var(--main-color); color: var(--main-color); }
.x8-bd-apply { padding: 0 14px; border: none; background: var(--main-color); color: #fff; border-radius: 5px; cursor: pointer; font-size: 13px; }
.x8-bd-apply:hover { filter: brightness(1.08); }

.x8-bd-tools .x8-ipt,
.x8-bd-tools .x8-bd-quick,
.x8-bd-tools .x8-bd-apply,
.x8-bd-tools .layui-btn { height: 28px; line-height: 26px; box-sizing: border-box; }
.x8-bd-tools .layui-btn { padding: 0 12px; font-size: 13px; }

.x8-bd-tools .layui-btn-primary:hover { border-color: var(--main-color); color: var(--main-color); }
.x8-bd-tools .x8-ipt { padding: 0 8px; font-size: 13px; }
.x8-bd-tools select.x8-ipt { padding-right: 24px; background-position: right 7px center; }
.x8-bd-step-box .x8-ipt { width: 60px; }
.x8-bd-sel { width: 88px; }
.x8-bd-sel { width: 96px; }


.x8-bd-czs { display: flex; gap: 26px; padding: 6px 12px 0; }
.x8-bd-cz { cursor: pointer; text-align: center; line-height: 1.5; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.x8-bd-cz .nm { display: block; font-size: 13px; color: #6b7683; }
.x8-bd-cz em { display: block; font-style: normal; font-size: 12px; color: #98a2ae; min-height: 16px; }
.x8-bd-cz.on { border-bottom-color: var(--main-color); }
.x8-bd-cz.on .nm { color: var(--main-color); font-weight: 600; }
.x8-bd-cz.on em { color: var(--main-color); }


.x8-bd-side { width: 190px; flex: none; background: #fff; border: 1px solid var(--bd-line, #e7ebf0); border-radius: 6px; overflow: hidden; }

.x8-bd-sd-hd { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; color: #fff; background: var(--main-color); cursor: pointer; }
.x8-bd-sd-hd:hover { filter: brightness(1.08); }
.x8-bd-sd-hd .layui-icon { font-size: 14px; }

.x8-bd-sd-bd { }
.x8-bd-sd-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 30px; padding: 0 12px; font-size: 13px; color: #465060; cursor: pointer; border-bottom: 1px solid #f2f4f7; }
.x8-bd-sd-row:last-child { border-bottom: none; }
.x8-bd-sd-row:hover { background: #f7f9fc; }
.x8-bd-sd-row.on { background: rgba(var(--main-color-rgb), .08); color: var(--main-color); }
.x8-bd-sd-row b { font-weight: 600; }


.x8-ro { opacity: .45; cursor: not-allowed !important; pointer-events: none; }
.x8-ro-tip { color: #98a2ae; font-size: 12px; }




.x8-tag { display: inline-block; padding: 0 5px; margin-left: 4px; border-radius: 2px;
  background: #eef4ff; color: #4a7dd0; font-size: 11px; line-height: 16px; vertical-align: 1px; }


.x8-bd-odds-set { cursor: pointer; }
.x8-bd-odds-set:hover { color: var(--main-color); }


.x8-sel { position: relative; display: inline-flex; align-items: center; height: 36px; box-sizing: border-box;
  border: 1px solid #dce1e6; border-radius: 5px; background: #fff; padding: 0 28px 0 11px; cursor: pointer;
  font-size: 13px; color: #333; user-select: none; transition: border-color .15s; }
.x8-sel:hover { border-color: #b9c2cc; }
.x8-sel.on { border-color: var(--main-color); box-shadow: 0 0 0 2px rgba(var(--main-color-rgb), .12); }
.x8-sel > select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.x8-sel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-sel-arrow { position: absolute; right: 11px; width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid #8a95a1; transition: transform .15s; }
.x8-sel.on .x8-sel-arrow { transform: rotate(180deg); border-top-color: var(--main-color); }
.x8-sel.x8-sel-off { background: #f5f7fa; color: #98a2ae; cursor: not-allowed; }



.x8-form-mid { max-width: 452px; margin: 0 auto; }
.x8-form-mid .x8-fi > .x8-lbl { width: 80px; padding-right: 10px; }


.x8-row2 > .x8-val > .x8-sel, .x8-row2 > .x8-val > select.x8-ipt { flex: none; width: 96px; }



.x8-pick { display: block; flex: 1 1 auto; min-width: 0; }

.x8-pick-on[hidden] { display: none; }
.x8-pick-on { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 11px; box-sizing: border-box;
  border: 1px solid #dce1e6; border-radius: 5px; background: #f7f9fc; font-size: 13px; }
.x8-pick-on > .x8-pick-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-pick-txt b { color: #333; font-weight: 600; }
.x8-pick-sub { margin-left: 8px; color: #98a2ae; }
.x8-pick-x { border: 1px solid #dce1e6; border-radius: 4px; background: #fff; color: #5b6673;
  height: 24px; padding: 0 10px; font-size: 12px; cursor: pointer; }
.x8-pick-x:hover { border-color: var(--main-color); color: var(--main-color); }
.x8-pick-panel { position: fixed; z-index: 2147483000; background: #fff; border: 1px solid #e2e7ee; border-radius: 5px;
  box-shadow: 0 6px 20px rgba(17, 22, 38, .12); font-size: 13px; overflow: hidden; box-sizing: border-box; }
.x8-pick-list { overflow-y: auto; padding: 4px 0; }
.x8-pick-opt { display: flex; align-items: center; padding: 7px 12px; color: #465060; cursor: pointer; }
.x8-pick-opt > b { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-pick-opt > .x8-pick-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x8-pick-opt.on, .x8-pick-opt:hover { background: rgba(var(--main-color-rgb), .08); }
.x8-pick-none { padding: 10px 12px; color: #98a2ae; }


.x8-sel-panel { position: fixed; z-index: 2147483000; background: #fff; border: 1px solid #e2e7ee; border-radius: 5px;
  box-shadow: 0 6px 20px rgba(17, 22, 38, .12); font-size: 13px; overflow: hidden; width: max-content; }

.x8-sel-list { overflow-y: auto; padding: 4px 0; }
.x8-sel-find { padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.x8-sel-find input { width: 100%; height: 28px; box-sizing: border-box; border: 1px solid #dce1e6; border-radius: 4px;
  padding: 0 8px; font-size: 13px; outline: none; }
.x8-sel-find input:focus { border-color: var(--main-color); }
.x8-sel-opt { padding: 7px 12px; color: #465060; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x8-sel-opt:hover { background: rgba(var(--main-color-rgb), .08); color: var(--main-color); }
.x8-sel-opt.on { background: rgba(var(--main-color-rgb), .12); color: var(--main-color); font-weight: 600; }