/* ===== 足球竞猜平台 - 公共基础样式 v2 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #e53935; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #f5f5f5;
    color: #333;
    -webkit-font-smoothing: antialiased; scroll-behavior: smooth;
    min-height: 100vh;
}

/* ===== 顶部栏 ===== */
.header {
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.header > a { color: #fff; text-decoration: none; font-size: 22px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.header h1 { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.2; }
.header h2 { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.2; }
.header .h-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.header .h-right { display: flex; align-items: center; gap: 10px; }
.header .h-coins { background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; font-size: 13px; white-space: nowrap; }
.header .h-login a { padding: 6px 16px; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 20px; font-size: 13px; }
.header .h-user { font-size: 14px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 底部导航 ===== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid #eee;
    display: flex; padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
}
.bottom-nav a {
    flex: 1; text-align: center; color: #999;
    text-decoration: none; font-size: 11px; transition: color .2s;
}
.bottom-nav a.active { color: #e53935; }
.bottom-nav a .nav-icon { font-size: 20px; display: block; margin-bottom: 2px; }

/* ===== 容器 & 分区 ===== */
.section { padding: 12px 12px 0; }
.section-title {
    font-size: 15px; font-weight: 600; color: #333;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.section-title .badge {
    font-size: 11px; background: #e53935; color: #fff;
    padding: 2px 8px; border-radius: 10px; font-weight: 400;
}

/* ===== 消息提示 ===== */
.msg { 
    padding: 10px 14px; border-radius: 8px; font-size: 13px;
    margin-bottom: 12px; text-align: center; 
}
.msg.success, .msg-bar.success { background: #fce4e4; color: #e53935; }
.msg.error, .msg-bar.error { background: #fff2f0; color: #e54545; }
.msg-bar { 
    padding: 10px 14px; margin: 0 16px 8px;
    border-radius: 8px; font-size: 13px; text-align: center; 
}

/* ===== 按钮 ===== */
.btn {
    width: 100%; padding: 14px; background: #e53935; color: #fff;
    border: none; border-radius: 10px; font-size: 16px;
    font-weight: 600; cursor: pointer; transition: background .2s, transform .15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
.btn-primary { background: #e53935; position: relative; overflow: hidden; }
.btn-primary:active { background: #c62828; }
.btn-secondary { background: #f5f5f5; color: #666; }
.btn-secondary:active { background: #e8e8e8; }

/* ===== 返回链接 ===== */
.back-link { display: block; text-align: center; margin-top: 16px; color: #999; font-size: 13px; text-decoration: none; }

/* ===== 空状态 ===== */
.empty-state { text-align: center; padding: 60px 20px; color: #999; font-size: 14px; }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }

/* ===== 表单 ===== */
input, button, textarea, select { font-family: inherit; }
input:focus { outline: none; border-color: #e53935; }

/* ===== 分组标题 ===== */
.group-title { font-size: 14px; font-weight: 600; color: #999; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.group-title .gl { width: 3px; height: 14px; border-radius: 2px; display: inline-block; background: #e53935; }

/* ===== 弹窗通用 ===== */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); z-index: 200;
    justify-content: center; align-items: flex-end;
}
.modal-overlay.show { display: flex; }
.modal {
    background: #fff; border-radius: 16px 16px 0 0;
    width: 100%; max-width: 420px; max-height: 85vh;
    overflow-y: auto; padding: 20px;
    animation: slideUp 0.25s ease;
}
.modal .modal-title { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 16px; }
.modal .form-group { margin-bottom: 14px; }
.modal .form-group label { display: block; font-size: 13px; color: #666; margin-bottom: 4px; }
.modal .form-group input {
    width: 100%; padding: 12px; border: 1.5px solid #e0e0e0;
    border-radius: 8px; font-size: 15px; outline: none;
}
.modal .form-group input:focus { border-color: #e53935; }
.modal .form-group .hint { font-size: 11px; color: #999; margin-top: 3px; }

/* ===== 动画 ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.4); } 70% { box-shadow: 0 0 0 10px rgba(229,57,53,0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes bounceIn { 0% { transform: scale(0); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-30px); } 100% { opacity: 0; transform: translateY(-50px); } }
@keyframes scaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.fade-in { animation: fadeIn .35s ease; }
.fade-in-down { animation: fadeInDown .35s ease; }
.fade-in-left { animation: fadeInLeft .35s ease; }
.fade-in-right { animation: fadeInRight .35s ease; }
.scale-in { animation: scaleIn .35s ease; }
.slide-up { animation: slideUp .35s ease; }

/* 入场动画 — 每项依次延迟 */
.anim-stagger > * { opacity: 0; animation: fadeIn .4s ease forwards; }
.anim-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.09s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.14s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.19s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.24s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.29s; }
.anim-stagger > *:nth-child(7) { animation-delay: 0.34s; }
.anim-stagger > *:nth-child(8) { animation-delay: 0.39s; }
.anim-stagger > *:nth-child(9) { animation-delay: 0.44s; }
.anim-stagger > *:nth-child(10) { animation-delay: 0.49s; }
.anim-stagger > *:nth-child(n+11) { animation-delay: 0.54s; }

/* 滚动触发的入场动画 */
.anim-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.anim-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* 按钮涟漪效果 */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn::after { content: ''; position: absolute; width: 100%; padding-top: 100%; border-radius: 50%; background: rgba(255,255,255,0.3); top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); pointer-events: none; }
.ripple-btn:active::after { animation: ripple .4s ease-out; }

/* 页面入口整体动画 */
.page-enter { animation: fadeIn .3s ease; }

/* 实时比分脉冲 */
.live-pulse { animation: pulseGlow 1.5s infinite; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e53935; animation: pulse 1.2s infinite; margin-right: 4px; vertical-align: middle; }

/* 金币飞出效果 */
.coin-fly { position: fixed; font-size: 20px; pointer-events: none; z-index: 999; animation: floatUp .8s ease-out forwards; }

/* 骨架屏加载 */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
.skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-block { height: 60px; margin-bottom: 8px; border-radius: 10px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* 过渡增强 */
.match-card { transition: transform .2s, box-shadow .2s; }
.match-card:active { transform: scale(0.98); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.settings-item:active { background: #f9f9f9; transform: scale(0.985); }

/* 底部导航增强 */
.bottom-nav a .nav-icon { display: block; transition: transform .15s; }
.bottom-nav a:active .nav-icon { transform: scale(1.2); }

/* 通知角标弹入 */
.notif-badge { animation: bounceIn .35s ease; }

/* 弹窗过渡 */
.modal { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-overlay { transition: background .25s; }
.modal-overlay:not(.show) { background: transparent; pointer-events: none; }
.modal-overlay:not(.show) .modal { transform: translateY(100%); opacity: 0; }

/* ===== 加载动画 ===== */
.loading-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8); z-index: 300;
    justify-content: center; align-items: center;
}
.loading-overlay.show { display: flex; }
.loading-spinner {
    width: 36px; height: 36px; border: 3px solid #e0e0e0;
    border-top-color: #e53935; border-radius: 50%;
    animation: spin .7s linear infinite;
}
.loading-text { margin-top: 10px; font-size: 13px; color: #999; }

/* 按钮内加载 */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: spin .6s linear infinite;
}

/* ===== Toast 提示 ===== */
.toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px;
    border-radius: 10px; font-size: 14px; z-index: 999;
    animation: fadeIn .2s ease; max-width: 80vw; text-align: center;
    pointer-events: none;
}
.toast.hide { animation: fadeOut .2s ease forwards; }
@keyframes fadeOut { to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }

/* ===== 页面过渡 ===== */

/* ===== 卡片通用 ===== */
.card-item { background:#f9f9f9; border-radius:10px; padding:12px; margin-bottom:8px; }
.card-item-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.card-bank { font-size:14px; font-weight:600; color:#333; }
.card-default-badge { font-size:10px; background:#e53935; color:#fff; padding:2px 8px; border-radius:10px; }
.card-number-display { font-size:13px; color:#666; margin-bottom:6px; font-family:monospace; }
.card-actions { display:flex; gap:8px; }
.card-btn { font-size:12px; padding:4px 12px; border-radius:6px; border:none; cursor:pointer; }
.card-btn-default { background:#e8f5e9; color:#2e7d32; }
.card-btn-del { background:#fbe9e7; color:#bf360c; }
.card-btn-edit { background:#e3f2fd; color:#1565c0; }
.add-card-btn { width:100%; padding:10px; border:1.5px dashed #ddd; border-radius:10px; background:transparent; color:#999; font-size:14px; cursor:pointer; margin-top:4px; }
.add-card-btn:active { background:#f9f9f9; border-color:#e53935; color:#e53935; }

/* ===== 设置项 ===== */
.settings-list { padding: 12px 16px; }
.settings-group { background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); overflow: hidden; }
.settings-group .group-title { padding: 14px 16px 6px; font-size: 12px; color: #999; font-weight: 500; }
.settings-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-top: 1px solid #f5f5f5;
    cursor: pointer; transition: background 0.15s;
}
.settings-item:active { background: #f9f9f9; }
.settings-item .left { display: flex; align-items: center; gap: 12px; }
.settings-item .left .icon { font-size: 20px; }
.settings-item .left .text { font-size: 15px; color: #333; }
.settings-item .left .sub { font-size: 12px; color: #999; margin-top: 2px; }
.settings-item .right { color: #ccc; font-size: 14px; }
.settings-item .right .val { color: #999; font-size: 13px; margin-right: 6px; }

/* ===== 个人中心 ===== */
.profile-header { background: linear-gradient(135deg, #e53935, #c62828); color: #fff; padding: 30px 20px; text-align: center; }
.profile-header .avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.2); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.profile-header .nickname { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.profile-header .coins { margin-top: 12px; background: rgba(255,255,255,0.15); padding: 8px 20px; border-radius: 20px; display: inline-block; font-size: 16px; }
.profile-header .coins .num { font-size: 22px; font-weight: 700; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; margin-top: -16px; }
.stat-card { background: #fff; border-radius: 12px; padding: 14px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.stat-card .stat-label { font-size: 12px; color: #999; }
.stat-card .stat-value { font-size: 18px; font-weight: 700; color: #333; margin-top: 4px; }
.menu-list { padding: 12px 16px; }
.menu-item {
    background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,0.06); transition: transform 0.15s;
    text-decoration: none;
}
.menu-item:active { transform: scale(0.98); }
.menu-item .left { display: flex; align-items: center; gap: 12px; }
.menu-item .left .icon { font-size: 22px; }
.menu-item .left .text { font-size: 15px; color: #333; font-weight: 500; }
.menu-item .right { color: #ccc; font-size: 18px; }
.logout-btn { display: block; margin: 8px 16px 0; padding: 14px; background: #fff; border: 1.5px solid #e54545; border-radius: 10px; text-align: center; color: #e54545; font-size: 15px; font-weight: 600; text-decoration: none; }

/* 通知小红点 */
.notif-badge { position:absolute; top:-2px; right:-6px; background:#e53935; color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.bottom-nav a { position:relative; }

/* 底部导航安全间距 */
.page-wrapper { min-height: 100vh; padding-bottom: 80px; }

/* 底部间距（与底部导航高度一致） */
.bottom-spacer { height: 80px; }