/* ==========================================
   PC端全面美化 - 现代深色科技风
   仅影响 width > 750px 的PC端
   ========================================== */

@media (min-width: 751px) {

/* ========== 全局 ========== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0f1a; }
::-webkit-scrollbar-thumb { background: #1a2a4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3a5a; }
::selection { background: rgba(31,253,250,0.2); color: #fff; }

/* ========== 头部导航 ========== */
.app-header.pc {
  background: linear-gradient(180deg, #0d1a2e 0%, #0f1e36 100%) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(31,253,250,0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 64px !important;
}
.app-header.pc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,253,250,0.25), transparent);
  pointer-events: none;
}
.app-header.pc .logo img {
  height: 40px !important;
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(31,253,250,0.15));
  transition: all 0.3s ease;
}
.app-header.pc .logo:hover img {
  transform: scale(1.06);
  filter: brightness(1.3) drop-shadow(0 0 12px rgba(31,253,250,0.25));
}
.app-header.pc .nav a {
  font-size: 14px !important;
  color: #7a8daa !important;
  letter-spacing: 0.3px;
  position: relative;
  transition: all 0.3s ease;
  height: 64px !important;
}
.app-header.pc .nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background: #1ffdfa;
  border-radius: 1px;
  transition: transform 0.3s ease;
  box-shadow: 0 0 6px rgba(31,253,250,0.4);
}
.app-header.pc .nav a:hover {
  color: #1ffdfa !important;
}
.app-header.pc .nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* 用户名/余额按钮 */
.username-btn, .balance-btn {
  transition: all 0.2s ease;
  border-radius: 8px !important;
}
.username-btn:hover, .balance-btn:hover {
  background: rgba(31,253,250,0.06) !important;
}
.user-name .name {
  font-weight: 600;
  font-size: 13px;
  color: #bacef1;
}
.user-balance .balance {
  font-weight: 700;
  color: #ffd700;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.coin-icon {
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.3));
}

/* 下拉菜单 */
.v-menu__content {
  background: #141c2e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 1px rgba(31,253,250,0.1) !important;
  overflow: hidden;
  margin-top: 4px;
}
.v-menu__content .account-info {
  background: linear-gradient(135deg, #16213e, #1a2540);
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.v-menu__content .welcome {
  color: #bacef1;
  font-weight: 600;
}
.v-menu__content .list-item {
  padding: 10px 16px;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.v-menu__content .list-item:hover {
  background: rgba(31,253,250,0.05);
}
.wallet-info {
  background: linear-gradient(135deg, #16213e, #1a2540);
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wallet-info-balance {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255,215,0,0.2);
}

/* 登录/注册按钮 */
.header-button.dark {
  border-radius: 10px !important;
  padding: 8px 22px !important;
  font-size: 13px !important;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: all 0.3s ease;
}
.header-button.dark:hover {
  border-color: rgba(31,253,250,0.35) !important;
  background: rgba(31,253,250,0.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31,253,250,0.1);
}

/* ========== 主体三栏布局 ========== */
.app-content.pc {
  display: flex;
  min-height: calc(100vh - 64px);
}

/* 左侧游戏筛选 */
.game-filter {
  width: 140px !important;
  min-width: 140px !important;
  background: linear-gradient(180deg, #0f1825, #0a1018) !important;
  border-right: 1px solid rgba(31,253,250,0.04) !important;
  padding: 12px 0 !important;
}
.game-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 12px !important;
  margin: 2px 6px !important;
  border-radius: 10px !important;
  transition: all 0.25s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.game-item:hover {
  background: rgba(31,253,250,0.05);
  border-color: rgba(31,253,250,0.08);
}
.game-item.game-item-active {
  background: linear-gradient(135deg, rgba(31,253,250,0.1), rgba(9,132,227,0.06)) !important;
  border-color: rgba(31,253,250,0.2) !important;
  box-shadow: 0 0 12px rgba(31,253,250,0.08);
}
.game-item .name {
  font-size: 13px;
  color: #8899aa;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-item.game-item-active .name {
  color: #1ffdfa;
  font-weight: 600;
}
.game-item .count {
  font-size: 10px;
  color: #5a6a7a;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 1px 6px;
  min-width: 20px;
  text-align: center;
}
.game-item.game-item-active .count {
  background: rgba(31,253,250,0.1);
  color: #1ffdfa;
}

/* 中间内容 */
.router-view {
  flex: 1;
  min-width: 0;
}

/* ========== 轮播 ========== */
.app-banner {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 1px rgba(31,253,250,0.08);
}
.app-banner .swiper-slide {
  border-radius: 14px;
}

/* 新闻滚动条 */
.txtScroll-top {
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}

/* ========== Tab导航 ========== */
.v-tabs__bar.theme--dark {
  background-color: #111a2e !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px 10px 0 0;
}
.v-tabs__item {
  transition: all 0.3s ease;
  padding: 12px 16px !important;
}
.v-tabs__item:hover {
  color: #1ffdfa !important;
}
.v-tabs__item--active {
  color: #1ffdfa !important;
}
.v-tabs__item--active .type-name {
  font-weight: 700;
}
.v-tabs__slider {
  background-color: #1ffdfa !important;
  height: 3px !important;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(31,253,250,0.4);
}

/* 赛事数量角标 */
.type-count {
  display: inline-block;
  min-width: 22px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: rgba(31,253,250,0.1);
  border: 1px solid rgba(31,253,250,0.15);
  border-radius: 10px;
  font-size: 11px;
  color: #1ffdfa;
  margin-left: 6px;
  padding: 0 6px;
  font-weight: 600;
}

/* ========== 赛事卡片列表容器 ========== */
.match-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.match-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ========== 赛事卡片 ========== */
.match-card {
  background: linear-gradient(135deg, #151d30 0%, #111827 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.match-card:hover {
  border-color: rgba(31,253,250,0.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 0 1px rgba(31,253,250,0.1);
  transform: translateY(-2px);
}

/* 卡片头部 - 联赛信息 */
.match-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.match-card-header .match-status {
  font-size: 11px;
}
.match-card-header .match-status strong {
  color: #5a6a7a;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.match-card-header .match-info .tournament-name {
  font-size: 13px;
  color: #8899aa;
  font-weight: 500;
}
.match-card-header .league-tag {
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* 卡片主体 - 对阵布局 */
.match-card-body {
  display: flex;
  align-items: center;
  flex: 1;
}
.match-card-body .team-home,
.match-card-body .team-away {
  flex: 1;
}
.match-card-body .match-center {
  flex-shrink: 0;
  text-align: center;
  min-width: 60px;
}

/* 赛事按钮 */
.match-card .match-button {
  border-radius: 8px;
  transition: all 0.2s ease;
  overflow: hidden;
}
.match-card .match-button:hover {
  background: rgba(31,253,250,0.04);
}
.match-card .btn-contain {
  padding: 10px 14px;
}
.match-card .team-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  border: 2px solid rgba(31,253,250,0.12);
  object-fit: cover;
  transition: all 0.2s ease;
}
.match-card:hover .team-logo {
  border-color: rgba(31,253,250,0.2);
  box-shadow: 0 0 8px rgba(31,253,250,0.1);
}
.match-card .odds-name {
  font-size: 13px !important;
  color: #bacef1 !important;
  font-weight: 500;
}
.match-card .bet-odds {
  font-size: 15px !important;
  color: #ffd700 !important;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255,215,0,0.15);
  letter-spacing: 0.5px;
}
.match-card .left-score,
.match-card .right-score {
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #1ffdfa !important;
  text-shadow: 0 0 10px rgba(31,253,250,0.2);
}
.match-card .default-status {
  color: #3d4a5c !important;
  font-size: 14px;
  font-weight: 700;
}
.match-card .game-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 封盘锁 */
.odds-lock {
  filter: drop-shadow(0 0 4px rgba(255,75,75,0.3));
}

/* 已结束赛事 */
.match-card[style*="opacity"] {
  opacity: 0.5 !important;
}

/* 日期显示 */
.match-schedule {
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}
.current-date {
  font-size: 14px;
  color: #bacef1;
  font-weight: 600;
}
.full-time {
  letter-spacing: 1px;
}
.day-week {
  color: #1ffdfa;
  margin-left: 8px;
  font-weight: 600;
}

/* 空提示 */
.empty-match-tip {
  text-align: center;
  padding: 60px 20px;
  color: #3d4a5c;
  font-size: 14px;
  background: rgba(255,255,255,0.01);
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.05);
  margin: 20px 0;
}

/* ========== 右侧投注栏 ========== */
.bet-info {
  width: 280px !important;
  min-width: 280px !important;
  background: linear-gradient(180deg, #111a2e, #0d1420) !important;
  border-left: 1px solid rgba(255,255,255,0.04) !important;
}
.bet-info .v-tabs__bar.theme--dark {
  background-color: #0a0f1a !important;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
  font-weight: 600;
  color: #bacef1;
}
.empty-slip {
  text-align: center;
  padding: 50px 20px;
}
.empty-bkg {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: rgba(31,253,250,0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(31,253,250,0.1);
}
.main-tip {
  font-size: 14px;
  color: #5a6a7a;
  margin-top: 12px;
}
.sub-tip {
  font-size: 12px;
  color: #3d4a5c;
  margin-top: 6px;
}

/* 投注记录 */
.history-list .read-more {
  padding: 12px 16px;
  margin: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
  color: #8899aa;
  transition: all 0.2s ease;
}
.history-list .read-more:hover {
  background: rgba(31,253,250,0.03);
  border-color: rgba(31,253,250,0.08);
}

/* ========== 底部Footer ========== */
.app-footer.pc {
  background: linear-gradient(180deg, #0d1420 0%, #080c14 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.app-footer.pc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,253,250,0.15), transparent);
}
.footer-games .nav-list-title {
  font-size: 14px;
  color: #bacef1;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.footer-games .nav-list-body a {
  color: #5a6a7a !important;
  font-size: 13px;
  transition: all 0.2s ease;
  padding: 3px 0;
}
.footer-games .nav-list-body a:hover {
  color: #1ffdfa !important;
}
.footer-middle {
  background: rgba(255,255,255,0.01);
  border-top: 1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding: 20px 0 !important;
}
.payment-method {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payment-method img {
  height: 24px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.payment-method img:hover {
  opacity: 0.8;
}
.service-button {
  background: linear-gradient(135deg, #0585a1, #0984e3) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(5,133,161,0.2);
}
.service-button:hover {
  box-shadow: 0 4px 16px rgba(5,133,161,0.35);
  transform: translateY(-2px);
}
.footer-bottom {
  color: #2a3548 !important;
  font-size: 12px;
  padding: 12px 0 !important;
}

/* ========== 弹窗美化 ========== */
.v-dialog {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 1px rgba(31,253,250,0.1) !important;
  border: 1px solid rgba(255,255,255,0.06);
}
.v-dialog .card {
  background: linear-gradient(180deg, #151d30, #0f1520) !important;
}
.login-header {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 28px;
  background: linear-gradient(180deg, rgba(31,253,250,0.03), transparent);
}
.login-header .header-title {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.close-icon {
  transition: transform 0.2s ease;
}
.close-icon:hover {
  transform: rotate(90deg);
}
.base-input .input-container {
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.base-input .input-container:focus-within {
  border-color: rgba(31,253,250,0.3);
  box-shadow: 0 0 12px rgba(31,253,250,0.08);
}
.base-input input {
  font-size: 14px;
  color: #e0e6ed;
  padding: 12px 16px;
}
.base-button {
  border-radius: 12px !important;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 700;
  transition: all 0.3s ease;
  padding: 14px !important;
}
.base-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(5,133,161,0.3);
}
.base-button.taobao {
  background: linear-gradient(135deg, #0585a1, #0984e3) !important;
}

/* ========== 用户中心页面美化 ========== */
.promotions-page {
  gap: 16px;
}
.promotion-card {
  background: linear-gradient(135deg, #151d30, #1a2540) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: all 0.3s ease;
}
.promotion-card:hover {
  border-color: rgba(31,253,250,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}
.promotion-img {
  border-radius: 14px 14px 0 0;
}
.promotion-title {
  color: #bacef1 !important;
  font-size: 14px !important;
}
.promotion-time {
  color: #5a6a7a !important;
  font-size: 12px !important;
}
.card-footer {
  background: rgba(0,0,0,0.2) !important;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ========== 消息提示 ========== */
#messageBox {
  background: rgba(10,15,26,0.92) !important;
  border: 1px solid rgba(31,253,250,0.15);
  border-radius: 10px !important;
  padding: 12px 28px !important;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ========== 详情页美化 ========== */
.pc-detail-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}
.pc-detail-main {
  flex: 1;
  min-width: 0;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
}
.pc-detail-sidebar {
  width: 280px;
  min-width: 280px;
  background: linear-gradient(180deg, #111a2e, #0d1420);
  border-left: 1px solid rgba(255,255,255,0.04);
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  scrollbar-width: none;
}
.pc-detail-sidebar::-webkit-scrollbar {
  display: none;
}

/* ========== 混合过关PC端美化 ========== */
.hhgg-pc-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}
.hhgg-pc-main {
  flex: 1;
  min-width: 0;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
}
.hhgg-pc-sidebar {
  width: 300px;
  min-width: 300px;
  background: #111827;
  border-left: 1px solid rgba(255,255,255,0.04);
  padding: 20px;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

/* ========== 微动画 ========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.match-card {
  animation: fadeIn 0.3s ease;
}
.match-list > .match-card-link:nth-child(2) .match-card { animation-delay: 0.05s; }
.match-list > .match-card-link:nth-child(3) .match-card { animation-delay: 0.1s; }
.match-list > .match-card-link:nth-child(4) .match-card { animation-delay: 0.15s; }
.match-list > .match-card-link:nth-child(5) .match-card { animation-delay: 0.2s; }

/* 脉冲动画 - 进行中 */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(255,71,87,0); }
}
.live-icon {
  animation: livePulse 1.5s ease-in-out infinite;
}

/* 发光边框效果 */
@keyframes glowBorder {
  0%, 100% { border-color: rgba(31,253,250,0.08); }
  50% { border-color: rgba(31,253,250,0.18); }
}
.game-item-active {
  animation: glowBorder 3s ease-in-out infinite;
}

/* ========== 投注单面板（详情页） ========== */
.betting-betslip .betslip-card {
  background: linear-gradient(135deg, #151d30, #111827);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.betting-betslip .betslip-header {
  background: rgba(31,253,250,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 16px;
}
.bet-button {
  background: linear-gradient(135deg, #0585a1, #0984e3) !important;
  border-radius: 10px !important;
  padding: 8px 24px !important;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
.bet-button:hover {
  box-shadow: 0 4px 16px rgba(5,133,161,0.3);
  transform: translateY(-1px);
}

/* ========== 重构赛事卡片结构 ========== */
.match-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.match-card-link {
  text-decoration: none;
  color: inherit;
}
.match-card {
  display: flex;
  flex-direction: column;
}
.match-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.match-card-body {
  display: flex;
  align-items: stretch;
}
.match-card-body .team-home,
.match-card-body .team-away {
  flex: 1;
}
.match-card-body .match-center {
  flex-shrink: 0;
  min-width: 80px;
}
.match-card .right-score {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #1ffdfa !important;
  text-shadow: 0 0 8px rgba(31,253,250,0.15);
}

} /* end @media (min-width: 751px) */