/* ===========================
   赔率变化提示 — 全站通用
   ========================== */
.odds-change-up .bet-odds,
.odds-change-up .evt-odds-val {
  color: #4ADE80 !important;
  transition: color 0.3s;
}
.odds-change-down .bet-odds,
.odds-change-down .evt-odds-val {
  color: #F87171 !important;
  transition: color 0.3s;
}

.modal-mask {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) {
  .modal-mask { align-items: center; }
}

/* ===========================
   通用玻璃态卡片
   ========================== */
.glass-card {
  background: var(--bubble-bg-solid);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--bubble-blur); -webkit-backdrop-filter: var(--bubble-blur);
  border: var(--bubble-border);
  box-shadow: var(--bubble-shadow);
}

/* ===========================
   Toast — 深色玻璃态
   ========================== */
.toast-container {
  position: fixed; top: clamp(56px, 16vw, 72px); left:50%; transform: translateX(-50%);
  z-index: 99999; width: calc(100% - 48px); max-width: 432px; pointer-events: none;
}
.toast-msg {
  background: rgba(18,18,36,0.96);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-main);
  border-radius: var(--radius-md); padding: 14px 18px;
  font-size: var(--fs-sm); display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  animation: toastIn 0.3s cubic-bezier(.4,0,.2,1), toastOut 0.3s ease 2.2s forwards;
  font-weight: 500;
}
.toast-msg i { font-size: var(--icon-xl); color: var(--primary); flex-shrink: 0; }
.toast-msg.error { border-color: rgba(255,107,107,0.2); }
.toast-msg.error i { color: var(--accent-red); }
@keyframes toastIn { from { opacity:0; transform: translateY(-16px); } to { opacity:1; transform: translateY(0); } }
@keyframes toastOut { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(-16px); } }

/* ===========================
   登录 / 注册 统一弹窗 — 品牌级视觉升级
   ========================== */
#authMask {
  align-items: center; justify-content: center;
}

.auth-modal {
  background: rgba(12,14,30,0.98);
  backdrop-filter: saturate(200%) blur(30px);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl); padding: 0;
  width: calc(100% - 48px); max-width: 400px; position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  animation: authModalIn 0.35s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
@keyframes authModalIn {
  from { opacity:0; transform: scale(0.94) translateY(16px); }
  to { opacity:1; transform: scale(1) translateY(0); }
}

/* ===== 品牌头部区域 ===== */
.auth-brand-header {
  position: relative;
  padding: 28px 24px 20px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,230,138,0.12) 0%, rgba(0,180,107,0.06) 50%, rgba(255,209,102,0.08) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.auth-brand-glow {
  position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,230,138,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.auth-brand-icon {
  position: relative;
  width: clamp(44px, 15vw, 56px); height: clamp(44px, 15vw, 56px);
  margin: 0 auto 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,230,138,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}
.auth-brand-icon i {
  font-size: var(--icon-2xl); color: #0B1426;
}
.auth-brand-title {
  position: relative;
  font-size: var(--fs-2xl); font-weight: 800; color: var(--text-main);
  letter-spacing: -0.5px; margin-bottom: 4px;
}
.auth-brand-sub {
  position: relative;
  font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500;
}

/* ===== Tab 切换 — 滑动指示器 ===== */
.auth-tabs {
  position: relative;
  display: flex; align-items: center;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  padding: 4px; margin: 16px 20px 0;
  border: 1px solid rgba(255,255,255,0.04);
}
.auth-tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-size: var(--fs-lg); font-weight: 700; color: var(--text-muted);
  background: transparent; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 2;
}
.auth-tab.active {
  color: #0B1426;
}
.auth-tabs-indicator {
  position: absolute; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: rgba(255,255,255,0.88);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(255,255,255,0.12);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}
/* 注册 Tab 激活时，指示器滑到右边 */
.auth-tabs-indicator.right {
  transform: translateX(100%);
}

/* ===== 面板切换 ===== */
.auth-panel { display: none; }
.auth-panel.active { display: block; animation: panelFadeIn 0.3s cubic-bezier(.4,0,.2,1); }
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 24px;
}

/* ===== 输入框 — 升级版 ===== */
.auth-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm); padding: 0 14px;
  transition: all 0.25s ease;
  position: relative;
}
.auth-input-wrap:focus-within {
  border-color: var(--primary);
  background: rgba(0,230,138,0.03);
  box-shadow: 0 0 0 3px rgba(0,230,138,0.08);
}
.auth-input-wrap > i:first-child {
  font-size: var(--icon-lg); color: var(--text-muted); flex-shrink: 0;
  transition: color 0.25s;
  line-height: 1; vertical-align: middle;
  width: 1em; text-align: center;
}
.auth-input-wrap:focus-within > i:first-child {
  color: var(--primary);
}
.auth-input {
  flex:1; background: transparent; border: none; outline: none;
  color: var(--text-main); font-size: var(--fs-lg); padding: 14px 0;
  font-family: inherit; caret-color: var(--primary);
}
.auth-input::placeholder { color: var(--text-light); }

/* 密码显示/隐藏眼睛按钮 */
.pwd-eye {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--text-light); font-size: var(--icon-md); flex-shrink: 0;
  transition: color 0.15s; display: flex; align-items: center;
}
.pwd-eye:hover { color: var(--text-sub); }
.pwd-eye:active { transform: scale(0.9); }
.pwd-eye.showing { color: var(--primary); }

/* ===== 提交按钮 — 闪光渐变 ===== */
.btn-auth-submit {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FFD166 0%, #F0A500 50%, #FFD166 100%);
  background-size: 200% 100%;
  color: #0B1426;
  border: none;
  border-radius: var(--radius-sm); padding: 14px;
  font-size: var(--fs-md); font-weight: 700; cursor: pointer;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 20px rgba(255,209,102,0.30);
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.btn-auth-submit:active { transform: scale(0.97); opacity: 0.9; }
/* 闪光动画 */
.btn-auth-submit::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: none;
  animation: btnShimmer 3s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* 关闭按钮 — 柔和圆角，右上角内侧 */
.auth-close-btn {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted); border-radius: 50%; width: clamp(26px, 8vw, 30px); height: clamp(26px, 8vw, 30px);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--icon-sm); cursor: pointer; transition: all 0.2s;
  z-index: 10;
}
.auth-close-btn:hover {
  background: rgba(255,255,255,0.10);
  color: var(--text-main);
  border-color: rgba(255,255,255,0.10);
}
.auth-close-btn:active { transform: scale(0.9); }

/* 手机号输入行 — 巴西国旗 +55 + 输入框 */
.auth-phone-wrap { gap:0 !important; padding: 0 !important; }
.auth-phone-wrap:focus-within {
  border-color: var(--primary);
  background: rgba(0,230,138,0.03);
  box-shadow: 0 0 0 3px rgba(0,230,138,0.08);
}
.phone-prefix {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; flex-shrink: 0;
  border-right: 1.5px solid rgba(255,255,255,0.06);
  height: 48px; white-space: nowrap;
  background: rgba(255,255,255,0.01);
}
.phone-flag {
  width: clamp(20px, 6.5vw, 24px); height: clamp(14px, 5vw, 17px); border-radius: 2px;
  display: inline-block; object-fit: cover; flex-shrink: 0;
}
.phone-code { font-size: var(--fs-md); font-weight: 600; color: var(--text-sub); }
.auth-phone-wrap .auth-input { padding-left: 12px; }

/* ===== 记住账号 / 协议勾选 ===== */
.auth-remember {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  padding: 2px 0; margin-top: -2px;
  -webkit-tap-highlight-color: transparent;
}
.auth-remember input[type="checkbox"] { display: none; }
.auth-remember .agreement-checkmark { margin-top: 0; }
.auth-remember .agreement-text { font-size: var(--fs-sm); }
/* 记住账号选中状态 */
.auth-remember input[type="checkbox"]:checked ~ .agreement-checkmark {
  background: var(--gold);
  border-color: var(--gold);
}
.auth-remember input[type="checkbox"]:checked ~ .agreement-checkmark::after {
  transform: rotate(45deg) scale(1);
}

/* ===== 用户协议勾选 ===== */
.auth-agreement {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; user-select: none;
  margin-top: -2px; padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}
.auth-agreement input[type="checkbox"] {
  display: none;
}
.agreement-checkmark {
  flex-shrink: 0; width: clamp(17px, 5.5vw, 20px); height: clamp(17px, 5.5vw, 20px); margin-top: 1px;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 5px; transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
}
.agreement-checkmark::after {
  content: '';
  display: block; width: 6px; height: 11px;
  border: solid #0B1426; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
}
.auth-agreement input[type="checkbox"]:checked ~ .agreement-checkmark {
  background: var(--gold);
  border-color: var(--gold);
}
.auth-agreement input[type="checkbox"]:checked ~ .agreement-checkmark::after {
  transform: rotate(45deg) scale(1);
}
.agreement-text {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5;
}
.agreement-text a {
  color: var(--primary); font-weight: 600; text-decoration: none;
}
.agreement-text a:hover { text-decoration: underline; }

/* 协议未勾选时按钮变灰提示 */
.btn-auth-submit.agreement-disabled {
  background: rgba(255,255,255,0.06);
  color: var(--text-light);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-auth-submit.agreement-disabled::after { display: none; }

/* ===========================
   用户协议 / 隐私政策 弹窗
   ========================== */
#agreementMask, #privacyMask {
  align-items: flex-end; justify-content: center;
}
@media (min-width: 768px) {
  #agreementMask, #privacyMask {
    align-items: center;
  }
}

.agreement-modal {
  background: rgba(16,16,34,0.98);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
  animation: agreementSlideUp 0.35s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 768px) {
  .agreement-modal {
    border-radius: var(--radius-lg);
    max-height: 75vh;
    animation: authModalIn 0.3s cubic-bezier(.4,0,.2,1);
  }
}
@keyframes agreementSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes agreementShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.agreement-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.agreement-header h3 {
  font-size: var(--fs-xl); font-weight: 800; color: var(--text-main);
  margin: 0; letter-spacing: -0.3px;
}
.agreement-header .btn-modal-close {
  position: static; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted); border-radius: 50%; width: clamp(26px, 8.5vw, 32px); height: clamp(26px, 8.5vw, 32px);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--icon-md); cursor: pointer; transition: all 0.2s;
}
.agreement-body {
  padding: 20px 24px; overflow-y: auto; flex: 1;
  line-height: 1.8; font-size: var(--fs-sm); color: var(--text-sub);
  -webkit-overflow-scrolling: touch;
}
.agreement-body h4 {
  font-size: var(--fs-lg); font-weight: 700; color: var(--text-main);
  margin: 18px 0 8px;
}
.agreement-body h4:first-child { margin-top: 0; }
.agreement-body p { margin: 6px 0; }
.agreement-body ul { padding-left: 18px; margin: 8px 0; }
.agreement-body li { margin-bottom: 6px; }
.agreement-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}