/* ================= 基础变量 ================= */
 :root {
     --sidebar-bg: #5D2EE2;
     --body-bg: #F0F4F8;
     --card-bg: #FFFFFF;

     --color-soccer: #4C7FFF;
     --color-basket: #FF5A8D;

     --text-dark: #2D3748;
     --text-gray: #718096;

     --shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     --radius: 12px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     background-color: var(--body-bg);
     color: var(--text-dark);
     display: flex;
     min-height: 100vh;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 ul {
     list-style: none;
 }

 /* ================= 1. 侧边栏 ================= */
 .sidebar {
     width: 240px;
     background-color: var(--sidebar-bg);
     color: #FFFFFF;
     padding: 24px;
     display: flex;
     flex-direction: column;
     position: fixed;
     height: 100vh;
     left: 0;
     top: 0;
     z-index: 100;
 }

 .logo {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 40px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .nav-menu li {
     margin-bottom: 15px;
 }

 .nav-menu a {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 12px 15px;
     border-radius: 8px;
     color: rgba(255, 255, 255, 0.8);
     transition: 0.3s;
 }

 .nav-menu a:hover,
 .nav-menu a.active {
     background: rgba(255, 255, 255, 0.15);
     color: #FFF;
     font-weight: bold;
 }

 .nav-menu i {
     width: 20px;
     text-align: center;
     font-size: 18px;
 }

 .sidebar-footer {
     margin-top: auto;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     font-size: 13px;
     color: rgba(255, 255, 255, 0.7);
 }

 /* ================= 2. 主内容区 ================= */
 .main-content {
     margin-left: 240px;
     flex: 1;
     padding: 30px;
     display: flex;
     flex-direction: column;
 }

 .top-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
 }

 .page-title h1 {
     font-size: 24px;
     color: var(--text-dark);
     margin-bottom: 5px;
 }

 .page-title p {
     font-size: 13px;
     color: var(--text-gray);
 }

 .search-area {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .search-box {
     background: #FFF;
     border-radius: 20px;
     padding: 10px 20px;
     box-shadow: var(--shadow);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .search-box input {
     border: none;
     outline: none;
     background: transparent;
     width: 200px;
 }

 .user-btn {
     width: 40px;
     height: 40px;
     background: #E2E8F0;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     /* 使用 flex 布局 */
     justify-content: center;
     /* 让图标水平居中 */
     align-items: center;
     /* 让图标垂直居中 */
     color: #718096;
     /* 设置图标的颜色 */
     font-size: 16px;
     /* 设置图标大小 */
     transition: 0.3s;
 }

 .user-btn:hover {
     background: #5D2EE2;
     /* 鼠标悬浮时变成主题色 */
     color: #FFFFFF;
     /* 图标变成白色 */
 }

 cursor: pointer;
 }

 .filter-tabs {
     display: flex;
     gap: 15px;
     margin-bottom: 25px;
     flex-wrap: wrap;
 }

 .tab-btn {
     padding: 8px 20px;
     border-radius: 20px;
     background: #FFF;
     color: var(--text-gray);
     font-weight: bold;
     font-size: 14px;
     cursor: pointer;
     box-shadow: var(--shadow);
     transition: 0.3s;
 }

 .tab-btn.active {
     background: var(--sidebar-bg);
     color: #FFF;
 }

 /* ================= 3. 内容网格布局 ================= */
 .content-layout {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 30px;
 }

 /* === 左侧赛事区 === */
 .featured-card {
     background: linear-gradient(135deg, var(--color-soccer), #2B4C99);
     border-radius: var(--radius);
     padding: 30px;
     color: #FFF;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
     box-shadow: var(--shadow);
 }

 .feat-info h2 {
     font-size: 28px;
     margin-bottom: 10px;
 }

 .feat-info p {
     opacity: 0.8;
     font-size: 14px;
     margin-bottom: 20px;
 }

 .btn-watch {
     background: #FFF;
     color: var(--color-soccer);
     padding: 10px 24px;
     border-radius: 20px;
     font-weight: bold;
     border: none;
     cursor: pointer;
 }

 .feat-score {
     font-size: 40px;
     font-weight: bold;
     letter-spacing: 2px;
 }

 .section-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     font-size: 18px;
     font-weight: bold;
     color: var(--text-dark);
 }

 .match-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 20px;
     margin-bottom: 40px;
 }

 .match-card {
     background: var(--card-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
     transition: transform 0.2s;
     cursor: pointer;
 }

 .match-card:hover {
     transform: translateY(-5px);
 }

 .dz2012 {

     transition: transform 0.2s;
     cursor: pointer;
 }

 .dz2012:hover {
     transform: translateY(-5px);
 }


 .card-header {
     padding: 10px 15px;
     color: #FFF;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
     font-weight: bold;
 }

 .card-header.soccer {
     background-color: var(--color-soccer);
 }

 .card-header.basket {
     background-color: var(--color-basket);
 }

 .status-badge {
     background: rgba(255, 255, 255, 0.2);
     padding: 2px 8px;
     border-radius: 10px;
 }

 .card-body {
     padding: 20px 15px;
 }

 .team-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
 }

 .team {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     width: 40%;
 }

 .team-logo {
     width: 45px;
     height: 45px;
     background: #F7FAFC;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     color: var(--text-gray);
 }

 .team-name {
     font-size: 14px;
     font-weight: bold;
     text-align: center;
 }

 .score-vs {
     font-size: 14px;
     font-weight: bold;
     color: var(--text-dark);
 }

 .card-footer {
     border-top: 1px dashed #E2E8F0;
     padding-top: 10px;
     text-align: center;
     font-size: 12px;
     color: var(--text-gray);
 }

 /* 热门标签 & 合作伙伴 (原图底部板块) */
 .bottom-widgets {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .tag-cloud {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .tag-item {
     background: #FFF;
     border: 1px solid #E2E8F0;
     padding: 6px 15px;
     border-radius: 8px;
     font-size: 13px;
     color: var(--text-gray);
     cursor: pointer;
     transition: 0.2s;
 }

 .tag-item:hover {
     border-color: var(--sidebar-bg);
     color: var(--sidebar-bg);
 }

 .partners-list {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
 }

 .partner-box {
     background: #FFF;
     border: 1px solid #E2E8F0;
     padding: 10px 20px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: bold;
     color: var(--text-gray);
 }

 /* === 右侧栏 (资讯、热门赛事、回放) === */
 .side-widget {
     background: var(--card-bg);
     border-radius: var(--radius);
     padding: 20px;
     box-shadow: var(--shadow);
     margin-bottom: 30px;
 }

 .widget-title {
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 15px;
     border-left: 4px solid var(--sidebar-bg);
     padding-left: 10px;
 }

 /* 热门赛事 排行榜 (新增) */
 .hot-events-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .hot-event-item {
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 14px;
     color: var(--text-dark);
     cursor: pointer;
     transition: 0.2s;
     padding: 5px 0;
     border-bottom: 1px dashed #F0F4F8;
 }

 .hot-event-item:last-child {
     border-bottom: none;
 }

 .hot-event-item:hover {
     color: var(--sidebar-bg);
     transform: translateX(5px);
 }

 .rank-num {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: #E2E8F0;
     color: var(--text-gray);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
     font-weight: bold;
 }

 /* 前三名专属高亮颜色 */
 .hot-event-item:nth-child(1) .rank-num {
     background: #FF4757;
     color: #FFF;
 }

 .hot-event-item:nth-child(2) .rank-num {
     background: #FF7F50;
     color: #FFF;
 }

 .hot-event-item:nth-child(3) .rank-num {
     background: #FFA502;
     color: #FFF;
 }

 /* 新闻列表 */
 .news-item {
     display: flex;
     gap: 12px;
     margin-bottom: 15px;
     padding-bottom: 15px;
     border-bottom: 1px solid #F0F4F8;
 }

 .news-item:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
     border-bottom: none;
 }

 .news-icon {
     width: 36px;
     height: 36px;
     background: #EBF4FF;
     color: var(--color-soccer);
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .news-text h4 {
     font-size: 13px;
     margin-bottom: 4px;
     color: var(--text-dark);
 }

 .news-text p {
     font-size: 11px;
     color: var(--text-gray);
 }

 /* 录像回放 */
 .replay-item {
     display: flex;
     gap: 15px;
     margin-bottom: 15px;
     align-items: center;
 }

 .replay-thumb {
     width: 100px;
     height: 60px;
     background: var(--color-basket);
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #FFF;
     position: relative;
 }

 .replay-info h4 {
     font-size: 13px;
     color: var(--text-dark);
     margin-bottom: 4px;
 }

 .replay-info p {
     font-size: 11px;
     color: var(--text-gray);
 }

 /* ================= 移动端适配 ================= */
 .menu-toggle {
     display: none;
     font-size: 24px;
     color: var(--sidebar-bg);
     border: none;
     background: none;
 }

 @media (max-width: 1024px) {
     .content-layout {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .sidebar {
         transform: translateX(-100%);
     }

     .main-content {
         margin-left: 0;
         padding: 15px;
     }

     .menu-toggle {
         display: block;
     }

     .search-box {
         display: none;
     }

     .featured-card {
         flex-direction: column;
         text-align: center;
         gap: 20px;
     }
 }

 /* 1. 标签的基础样式 */
 .filter-tabs {
     display: flex;
     gap: 15px;
     margin-bottom: 25px;
     flex-wrap: wrap;
 }

 .tab-btn {
     padding: 8px 22px;
     border-radius: 20px;
     background: #FFFFFF;
     /* 默认纯白背景 */
     color: #718096;
     /* 默认灰文字 */
     font-weight: bold;
     font-size: 14px;
     cursor: pointer;
     border: 1px solid transparent;
     /* 预留边框，防止hover时元素抖动 */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     /* 默认微弱阴影 */

     /* 核心属性：让颜色和位移的变化有一个 0.3秒 的平滑过渡动画 */
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* 2. 鼠标悬浮效果 (Hover) */
 .tab-btn:hover {
     color: #5D2EE2;
     /* 鼠标放上去，文字变成主题紫色 */
     background-color: #F8F5FF;
     /* 背景变成极浅的紫色 */
     border-color: #5D2EE2;
     /* 增加紫色边框 */
     transform: translateY(-3px);
     /* 核心效果：鼠标放上去时，卡片微微向上浮动 */
     box-shadow: 0 6px 15px rgba(93, 46, 226, 0.15);
     /* 阴影加深，带有主题色光晕 */
 }

 /* 3. 被选中/激活时的效果 (Active) */
 .tab-btn.active {
     background-color: #5D2EE2;
     /* 选中时变成紫底 */
     color: #FFFFFF;
     /* 白字 */
     border-color: #5D2EE2;
     transform: translateY(-3px);
     /* 保持上浮状态 */
     box-shadow: 0 6px 15px rgba(93, 46, 226, 0.3);
     /* 强烈的紫色阴影 */
 }

 /* ================= 底部注册页脚卡片 ================= */
 .footer-card {
     background: var(--card-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 40px 20px;
     text-align: center;
     margin-top: 10px;
     /* 距离上方内容的间距 */
     margin-bottom: 20px;
 }

 .footer-time {
     font-size: 13px;
     color: var(--text-gray);
     margin-bottom: 15px;
 }

 .footer-slogan {
     font-size: 18px;
     color: var(--sidebar-bg);
     /* 使用侧边栏同款紫色 */
     margin-bottom: 12px;
     font-weight: bold;
     letter-spacing: 1px;
 }

 .footer-desc {
     font-size: 13px;
     color: var(--text-gray);
     margin-bottom: 25px;
 }

 .register-btn {
     /* 还原截图中的 蓝 -> 粉红 渐变 */
     background: linear-gradient(90deg, #4C7FFF, #E83E8C);
     color: #FFFFFF;
     border: none;
     padding: 12px 35px;
     border-radius: 25px;
     font-size: 15px;
     font-weight: bold;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .register-btn:hover {
     transform: translateY(-2px);
     /* 悬浮时微微上浮 */
     box-shadow: 0 6px 15px rgba(232, 62, 140, 0.4);
     /* 添加发光阴影 */
 }