/* ── Page Hero ── */
        .page-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); }
        .page-hero::before { content:''; position:absolute; top:-50%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,rgba(230,57,70,0.15) 0%,transparent 70%); pointer-events:none; }
        .page-hero::after { content:''; position:absolute; bottom:-30%; left:-5%; width:400px; height:400px; background:radial-gradient(circle,rgba(37,99,235,0.1) 0%,transparent 70%); pointer-events:none; }
        .page-hero-inner { max-width:1160px; margin:0 auto; padding:48px 20px 52px; position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; }
        .page-hero-text h1 { font-family:'Playfair Display',serif; font-size:42px; font-weight:900; color:#fff; letter-spacing:-1px; margin-bottom:10px; }
        .page-hero-text h1 span { color:var(--accent-brand); }
        .page-hero-text p { font-size:15px; color:rgba(255,255,255,0.5); line-height:1.6; max-width:480px; }
        .page-hero-stats { display:flex; gap:36px; }
        .hero-stat { text-align:center; }
        .hero-stat-num { font-family:'Playfair Display',serif; font-size:36px; font-weight:900; color:#fff; line-height:1; }
        .hero-stat-label { font-size:11px; color:rgba(255,255,255,0.4); letter-spacing:1px; text-transform:uppercase; margin-top:6px; }

        /* ── Expert Rankings ── */
        .expert-section { max-width:1160px; margin:0 auto; padding:44px 20px 0; }
        .section-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; padding-bottom:18px; border-bottom:2px solid var(--text-primary); position:relative; }
        .section-header::after { content:''; position:absolute; bottom:-2px; left:0; width:80px; height:2px; background:var(--accent-brand); }
        .section-title { display:flex; align-items:baseline; gap:14px; }
        .section-title h2 { font-family:'Playfair Display',serif; font-size:32px; font-weight:900; color:var(--text-primary); letter-spacing:-1px; }
        .section-title .cn-label { font-size:13px; color:var(--text-muted); font-weight:500; letter-spacing:2px; }
        .expert-scroll-track { display:flex; gap:16px; overflow:hidden; position:relative; padding:4px 2px 16px; }
        .expert-scroll-track:hover .expert-scroll-inner { animation-play-state:paused; }
        .expert-scroll-inner { display:flex; gap:16px; animation:scrollLoop 30s linear infinite; }
        .expert-scroll-inner:hover { animation-play-state:paused; }
        .expert-scroll-inner::-webkit-scrollbar { display:none; }
        @keyframes scrollLoop {
            0% { transform:translateX(0); }
            100% { transform:translateX(-50%); }
        }
        .expert-card { flex-shrink:0; width:220px; background:var(--bg-primary); border:1px solid var(--border-light); border-radius:var(--radius-md); padding:22px 20px; transition:var(--transition); cursor:pointer; position:relative; overflow:hidden; text-decoration:none; color:inherit; display:block; }
        .expert-card:hover { border-color:var(--border-medium); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
        .expert-card.top-3 { border-color:transparent; background:linear-gradient(var(--bg-primary),var(--bg-primary)) padding-box,linear-gradient(135deg,var(--accent-gold),#f0c674,var(--accent-gold)) border-box; border:2px solid transparent; }
        .expert-rank { position:absolute; top:12px; right:14px; font-family:'Playfair Display',serif; font-size:36px; font-weight:900; color:var(--border-light); line-height:1; }
        .expert-card.top-3 .expert-rank { color:rgba(212,168,83,0.2); }
        .expert-avatar { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; margin-bottom:14px; position:relative; z-index:1; }
        .expert-name { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:10px; position:relative; z-index:1; }
        .expert-record { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
        .expert-record span { font-weight:600; color:var(--text-secondary); }
        .expert-winrate { display:flex; align-items:baseline; gap:6px; margin-bottom:10px; }
        .expert-winrate-num { font-family:'Playfair Display',serif; font-size:28px; font-weight:900; color:var(--accent-green); line-height:1; }
        .expert-winrate-label { font-size:11px; color:var(--text-muted); font-weight:500; }
        .expert-progress { height:4px; background:var(--bg-tertiary); border-radius:2px; overflow:hidden; }
        .expert-progress-bar { height:100%; border-radius:2px; background:linear-gradient(to right,var(--accent-green),#34d399); transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }

        /* ── Main Layout ── */
        .main-layout { max-width:1160px; margin:0 auto; padding:44px 20px 0; display:grid; grid-template-columns:1fr 340px; gap:36px; }
        .tips-section-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid var(--text-primary); position:relative; }
        .tips-section-header::after { content:''; position:absolute; bottom:-2px; left:0; width:60px; height:2px; background:var(--accent-brand); }
        .tips-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--accent-green); background:rgba(5,150,105,0.08); padding:4px 12px; border-radius:100px; letter-spacing:0.5px; }
        .tips-badge::before { content:''; width:6px; height:6px; background:var(--accent-green); border-radius:50%; animation:pulse 2s ease-in-out infinite; }

        /* ── Tips Table ── */
        .tips-table { width:100%; border-collapse:collapse; }
        .tips-table thead th { font-size:12px; font-weight:600; color:var(--text-muted); text-align:center; padding:10px 14px; border-bottom:2px solid var(--border-light); letter-spacing:0.5px; white-space:nowrap; }
        .tips-table tbody tr { border-bottom:1px solid var(--border-light); transition:var(--transition); }
        .tips-table tbody tr:hover { background:var(--bg-secondary); }
        .tips-table tbody td { padding:14px; font-size:13px; color:var(--text-secondary); vertical-align:middle; }
        .tips-table .col-league { display:flex; align-items:center; gap:8px; white-space:nowrap; }
        .tips-table .league-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
        .tips-table .league-dot.football { background:var(--accent-football); }
        .tips-table .league-dot.basketball { background:var(--accent-basketball); }
        .tips-table .league-dot.other { background:var(--accent-green); }
        .tips-table .col-time { color:var(--text-muted); white-space:nowrap; font-size:12px; }
        .tips-table .col-match { font-weight:600; color:var(--text-primary); white-space:nowrap; text-align:center; }
        .tips-table .col-match .vs-text { color:var(--text-muted); font-weight:400; margin:0 6px; font-size:11px; }
        .tips-table .col-pick { font-weight:700; color:var(--accent-green);text-align: center; }
        .tips-table .col-odds { color:var(--text-muted); font-size:12px; }
        .tips-table .col-score { font-family:'Playfair Display',serif; font-weight:700; font-size:14px; letter-spacing:1px; color:var(--text-muted); text-align: center; }
        .tips-table .col-score.active { color:var(--text-primary); }
        .tip-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px; }
        .tip-status.pending { background:rgba(212,168,83,0.1); color:var(--accent-gold); }
        .tip-status.pending::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent-gold); animation:pulse 1.5s ease-in-out infinite; }
        .tip-status.draw { background:rgba(150, 39, 5, 0.1); color:var(--accent-green); }
        .tip-status.win { background:rgba(230,57,70,0.1); color:var(--accent-brand); }
        .tip-status.lose { background:rgba(212,168,83,0.1); color:var(--accent-gold); }
        .tips-table .col-expert { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); white-space:nowrap; }
        .tips-table .expert-dot { width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#fff; flex-shrink:0; }

        /* ── History Section ── */
        .history-section { padding:24px; }
        .history-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
        .history-title-line { flex:1; height:1px; background:var(--border-light); }
        .history-dots { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
        .history-dot { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; transition:var(--transition); cursor:default; }
        .history-dot:hover { transform:scale(1.15); }
        .history-dot.draw { background:rgba(5,150,105,0.1); color:var(--accent-green); }
        .history-dot.win { background:rgba(230,57,70,0.1); color:var(--accent-brand); }
        .history-dot.lose { background:#e8e8ee; color:#8e8ea0; }
        .history-arrow { font-size:10px; color:var(--text-muted); margin:0 4px; letter-spacing:2px; }
        .history-summary { display:flex; gap:20px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-light); }
        .history-summary-item { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); }
        .history-summary-dot { width:8px; height:8px; border-radius:3px; }
        .history-summary-dot.win { background:var(--accent-green); }
        .history-summary-dot.lose { background:var(--accent-brand); }
        .history-summary-dot.draw { background:var(--accent-gold); }
        .history-summary-num { font-weight:700; }

        /* ── Pagination ── */
        .pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:28px; }
        .page-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:14px; font-weight:600; color:var(--text-secondary); background:transparent; border:1.5px solid var(--border-light); cursor:pointer; transition:var(--transition); text-decoration:none; font-family:inherit; }
        .page-btn:hover { border-color:var(--text-primary); color:var(--text-primary); }
        .page-btn.active { background:var(--text-primary); color:#fff; border-color:var(--text-primary); }
        .page-btn.arrow { width:auto; padding:0 16px; gap:6px; font-size:13px; }

        /* ── Sidebar ── */
        .sidebar-widget { background:var(--bg-secondary); border-radius:var(--radius-md); padding:24px; margin-bottom:20px; }
        .widget-title { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--border-light); position:relative; }
        .widget-title::after { content:''; position:absolute; bottom:-2px; left:0; width:40px; height:2px; background:var(--accent-brand); }
        .login-form { display:flex; flex-direction:column; gap:12px; }
        .login-input { width:100%; padding:11px 16px; border:1.5px solid var(--border-light); border-radius:10px; font-size:13px; font-family:inherit; color:var(--text-primary); background:var(--bg-primary); transition:var(--transition); outline:none; }
        .login-input:focus { border-color:var(--accent-brand); box-shadow:0 0 0 3px rgba(230,57,70,0.08); }
        .login-input::placeholder { color:var(--text-muted); }
        .login-btn { width:100%; padding:12px; background:var(--accent-brand); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition:var(--transition); }
        .login-btn:hover { background:#d12f3c; transform:translateY(-1px); box-shadow:0 4px 14px rgba(230,57,70,0.3); }
        .login-links { display:flex; justify-content:space-between; margin-top:4px; }
        .login-links a { font-size:12px; color:var(--text-muted); text-decoration:none; transition:var(--transition); }
        .login-links a:hover { color:var(--accent-brand); }
        .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .stat-item { background:var(--bg-primary); border-radius:10px; padding:16px; text-align:center; }
        .stat-num { font-family:'Playfair Display',serif; font-size:24px; font-weight:900; line-height:1; margin-bottom:4px; }
        .stat-num.green { color:var(--accent-green); }
        .stat-num.red { color:var(--accent-brand); }
        .stat-num.gold { color:var(--accent-gold); }
        .stat-num.blue { color:var(--accent-football); }
        .stat-label { font-size:11px; color:var(--text-muted); font-weight:500; }
        .promo-widget { background:var(--text-primary); color:#fff; border-radius:var(--radius-md); padding:28px 24px; text-align:center; margin-bottom:20px; }
        .promo-widget h3 { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; margin-bottom:8px; }
        .promo-widget p { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.6; margin-bottom:18px; }
        .promo-btn { display:inline-block; padding:10px 32px; background:var(--accent-brand); color:#fff; border-radius:100px; text-decoration:none; font-size:13px; font-weight:600; transition:var(--transition); }
        .promo-btn:hover { background:#d12f3c; transform:translateY(-1px); box-shadow:0 4px 14px rgba(230,57,70,0.4); }

        /* ── Animations ── */
        .fade-in { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; }
        .fade-in.visible { opacity:1; transform:translateY(0); }