/* 章华体育 zhangchua.com — 黄白主题 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:       #f59e0b;
  --gold-d:     #d97706;
  --gold-dd:    #b45309;
  --gold-ddd:   #78350f;
  --gold-light: #fbbf24;
  --gold-pale:  #fffbeb;
  --gold-ghost: #fefce8;
  --navy:       #1e3a5f;
  --navy-d:     #0f2340;
  --navy-light: #2d5a8e;
  --navy-ghost: #f0f4f9;
  --white:      #ffffff;
  --bg:         #fffbeb;
  --dark:       #1c1008;
  --gray:       #6b7280;
  --gray-l:     #9ca3af;
  --border:     #fde68a;
  --border-nav: #fcd34d;
  --red:        #dc2626;
  --green:      #16a34a;
  --radius:     8px;
  --radius-lg:  14px;
  --shadow:     0 2px 12px rgba(245,158,11,.15);
  --shadow-lg:  0 8px 32px rgba(245,158,11,.18);
}
html{scroll-behavior:smooth}
body{font-family:'PingFang SC','Microsoft YaHei',Arial,sans-serif;background:var(--bg);color:var(--dark);line-height:1.6;font-size:15px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}

/* ── Countdown Bar ── */
.countdown-bar{background:linear-gradient(90deg,var(--navy-d),var(--navy),var(--navy-light));height:42px;display:flex;align-items:center;justify-content:center;gap:1.5rem;color:#fff}
.cd-label{font-size:.75rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em}
.cd-blocks{display:flex;align-items:center;gap:.6rem}
.cd-block{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.15rem .5rem;min-width:40px}
.cd-num{font-size:1.25rem;font-weight:900;color:var(--gold-light);line-height:1.1}
.cd-unit{font-size:.55rem;color:rgba(255,255,255,.5);text-transform:uppercase}
.cd-sep{font-size:1.1rem;font-weight:900;color:var(--gold);margin-bottom:6px}
.cd-title{font-size:.85rem;color:rgba(255,255,255,.9);font-weight:600}

/* ── Navbar ── */
.navbar{background:var(--white);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(245,158,11,.12)}
.navbar .wrap{display:flex;align-items:center;gap:1.5rem;height:62px}
.nav-links{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nav-links a{font-size:.9rem;font-weight:600;padding:.4rem .75rem;border-radius:6px;color:var(--navy);transition:.2s}
.nav-links a:hover{background:var(--gold-pale);color:var(--gold-dd)}
.nav-links .nav-cta{background:var(--gold);color:var(--navy-d);padding:.4rem 1rem;border-radius:20px;font-weight:700}
.nav-links .nav-cta:hover{background:var(--gold-d);color:#fff}
.nav-toggle{display:none;background:none;border:2px solid var(--gold);border-radius:6px;padding:.3rem .55rem;font-size:1.1rem;cursor:pointer;color:var(--navy)}
.nav-links.open{display:flex;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:var(--white);border-bottom:2px solid var(--gold);padding:1rem;z-index:99}

/* ── Live Score Ticker ── */
.score-ticker-bar{background:var(--navy);overflow:hidden;height:38px;display:flex;align-items:center}
.ticker-label{flex-shrink:0;background:var(--gold);color:var(--navy-d);font-size:.7rem;font-weight:800;padding:.2rem .7rem;height:100%;display:flex;align-items:center;gap:.35rem;letter-spacing:.04em}
.ticker-dot{width:7px;height:7px;background:#fff;border-radius:50%;animation:blink-dot 1s infinite}
.ticker-scroll{flex:1;overflow:hidden;white-space:nowrap}
.ticker-inner{display:inline-flex;gap:2.5rem;animation:ticker-move 50s linear infinite;padding-left:2rem}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.85);font-size:.8rem;flex-shrink:0}
.ticker-live-badge{background:var(--red);color:#fff;font-size:.6rem;font-weight:800;padding:.05rem .35rem;border-radius:3px;animation:blink-dot 1.5s infinite}
.ticker-score{font-weight:800;color:var(--gold-light)}
.ticker-league{color:rgba(255,255,255,.45);font-size:.7rem}
@keyframes ticker-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes blink-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 55%,var(--navy-light) 100%);padding:2.5rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);color:var(--navy-d);font-size:.7rem;font-weight:800;padding:.25rem .75rem;border-radius:20px;letter-spacing:.05em;margin-bottom:.75rem}
.hero-label{color:rgba(255,255,255,.55);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.hero-title{font-size:1.7rem;font-weight:900;color:#fff;line-height:1.25;margin-bottom:1rem}
.hero-pick-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:1.5rem;backdrop-filter:blur(6px)}
.hero-pick-league{color:var(--gold);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem}
.hero-pick-teams{font-size:1.3rem;font-weight:900;color:#fff;text-align:center;margin-bottom:.5rem}
.hero-pick-teams span{color:rgba(255,255,255,.4);font-size:.9rem;font-weight:400;margin:0 .5rem}
.hero-odds-row{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem}
.hero-odds-btn{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.5rem;text-align:center;cursor:pointer;transition:.2s}
.hero-odds-btn:hover,.hero-odds-btn.active{background:var(--gold);border-color:var(--gold)}
.hero-odds-btn:hover .odds-label,.hero-odds-btn.active .odds-label{color:var(--navy-d)}
.hero-odds-btn:hover .odds-val,.hero-odds-btn.active .odds-val{color:var(--navy-d)}
.odds-label{font-size:.65rem;color:rgba(255,255,255,.5);margin-bottom:.15rem}
.odds-val{font-size:1.1rem;font-weight:900;color:#fff}
.hero-rec-row{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between}
.hero-rec-label{font-size:.7rem;color:rgba(255,255,255,.55)}
.hero-rec-val{font-size:1.1rem;font-weight:900;color:var(--gold-light)}
.hero-conf{font-size:.85rem;color:var(--gold)}
/* Hero side quick picks */
.quick-picks-header{color:rgba(255,255,255,.5);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}
.quick-pick-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;transition:.2s}
.quick-pick-item:hover{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3)}
.qp-icon{font-size:1.1rem;flex-shrink:0}
.qp-body{flex:1;min-width:0}
.qp-teams{font-size:.85rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qp-meta{font-size:.7rem;color:rgba(255,255,255,.45)}
.qp-rec{font-size:.8rem;font-weight:800;color:var(--gold);flex-shrink:0}

/* ── Picks Section ── */
.section-block{padding:2rem 0}
.section-block+.section-block{border-top:1px solid var(--border)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.section-title{font-size:1.2rem;font-weight:900;color:var(--navy)}
.section-title span{color:var(--gold-d)}
.section-more{font-size:.82rem;color:var(--gold-dd);font-weight:600;border:1px solid var(--border);padding:.25rem .65rem;border-radius:20px}
.section-more:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* Picks Tabs */
.picks-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;background:var(--gold-pale);border:1px solid var(--border);border-radius:10px;padding:.35rem}
.picks-tab{flex:1;text-align:center;font-size:.85rem;font-weight:700;padding:.4rem .5rem;border-radius:7px;cursor:pointer;color:var(--gray);transition:.2s;border:none;background:none}
.picks-tab.active{background:var(--gold);color:var(--navy-d);box-shadow:0 2px 8px rgba(245,158,11,.3)}
.picks-panel{display:none}
.picks-panel.active{display:block}
.picks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* Pick Card */
.pick-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.pick-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pick-card-head{background:linear-gradient(90deg,var(--navy),var(--navy-light));padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between}
.pick-card-league{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.04em}
.pick-card-badge{font-size:.65rem;font-weight:800;padding:.15rem .5rem;border-radius:10px}
.pick-card-badge.vip{background:var(--gold);color:var(--navy-d)}
.pick-card-badge.free{background:rgba(255,255,255,.2);color:#fff}
.pick-card-body{padding:1rem}
.pick-teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem}
.pick-team-name{font-size:.85rem;font-weight:800;color:var(--navy);text-align:center;flex:1}
.pick-vs{font-size:.7rem;color:var(--gray-l);flex-shrink:0;padding:0 .35rem}
.pick-date{font-size:.7rem;color:var(--gray-l);margin-bottom:.75rem}
.pick-rec-box{background:var(--gold-pale);border:1px solid var(--border);border-radius:8px;padding:.6rem .75rem;margin-bottom:.6rem;display:flex;align-items:center;justify-content:space-between}
.pick-rec-val{font-size:1rem;font-weight:900;color:var(--gold-dd)}
.pick-conf{font-size:.8rem;color:var(--gold)}
.pick-note{font-size:.75rem;color:var(--gray);line-height:1.5}
.pick-card.hot-card .pick-card-head{background:linear-gradient(90deg,var(--gold-dd),var(--gold-d))}

/* ── Layout ── */
.content-row{display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}

/* ── Live Section ── */
.live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.live-card{background:linear-gradient(135deg,var(--navy),var(--navy-light));border-radius:var(--radius-lg);padding:1.25rem;color:#fff;position:relative;overflow:hidden}
.live-card::before{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.04)}
.live-badge{display:inline-flex;align-items:center;gap:.35rem;background:var(--red);font-size:.65rem;font-weight:800;padding:.15rem .45rem;border-radius:3px;margin-bottom:.6rem;animation:pulse-live 1.5s infinite}
.live-badge::before{content:'';width:5px;height:5px;background:#fff;border-radius:50%;animation:blink-dot 1s infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.7}}
.live-card-league{font-size:.7rem;color:rgba(255,255,255,.5);margin-bottom:.4rem}
.live-card-teams{font-size:1rem;font-weight:900;color:#fff;margin-bottom:.35rem}
.live-card-score{font-size:1.5rem;font-weight:900;color:var(--gold-light);margin-bottom:.3rem}
.live-card-min{font-size:.75rem;color:rgba(255,255,255,.5)}
.live-card-chan{font-size:.7rem;color:var(--gold);font-weight:600;margin-top:.6rem}
.live-stream-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow)}
.stream-icon{font-size:1.8rem;flex-shrink:0}
.stream-body{flex:1;min-width:0}
.stream-title{font-size:.9rem;font-weight:800;color:var(--navy);margin-bottom:.2rem}
.stream-meta{font-size:.75rem;color:var(--gray)}
.stream-btn{flex-shrink:0;background:var(--gold);color:var(--navy-d);font-size:.75rem;font-weight:800;padding:.4rem .85rem;border-radius:20px}
.stream-btn:hover{background:var(--gold-d);color:#fff}

/* ── News Grid ── */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.news-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.news-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.news-card-thumb{height:80px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;background:linear-gradient(135deg,var(--gold-pale),var(--gold-ghost))}
.news-card-body{padding:.9rem 1rem}
.news-tag{font-size:.65rem;font-weight:700;padding:.1rem .4rem;border-radius:3px;margin-right:.3rem}
.tag-wc{background:var(--gold);color:var(--navy-d)}
.tag-football{background:var(--navy);color:#fff}
.tag-basketball{background:var(--red);color:#fff}
.tag-hot{background:#fee2e2;color:var(--red)}
.news-card-title{font-size:.9rem;font-weight:800;color:var(--navy);margin:.5rem 0 .4rem;line-height:1.4}
.news-card-excerpt{font-size:.78rem;color:var(--gray);line-height:1.55;margin-bottom:.6rem}
.news-card-meta{font-size:.72rem;color:var(--gray-l);display:flex;gap:.75rem}

/* ── Americas Section ── */
.americas-section{background:var(--navy-d);padding:2.5rem 0}
.americas-title{color:#fff;font-size:1.2rem;font-weight:900;margin-bottom:.35rem}
.americas-sub{color:rgba(255,255,255,.5);font-size:.85rem;margin-bottom:1.5rem}
.host-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.host-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:1.5rem 1.25rem;text-align:center;transition:.2s}
.host-card:hover{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.host-flag{font-size:2.5rem;margin-bottom:.6rem}
.host-country{font-size:1.1rem;font-weight:900;color:var(--gold-light);margin-bottom:.35rem}
.host-matches{font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:.75rem}
.host-cities{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.host-city{font-size:.68rem;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);padding:.15rem .5rem;border-radius:10px}
.host-final-badge{display:inline-block;background:var(--gold);color:var(--navy-d);font-size:.65rem;font-weight:800;padding:.2rem .6rem;border-radius:10px;margin-top:.6rem}

/* ── Sidebar ── */
.sw{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.sw-header{background:linear-gradient(90deg,var(--gold-pale),var(--gold-ghost));border-bottom:2px solid var(--border-nav);padding:.65rem 1rem;font-size:.85rem;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:.4rem}
.sw-body{padding:.8rem 1rem}
/* Hot picks list */
.hot-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--gold-ghost)}
.hot-item:last-child{border-bottom:none}
.hot-num{width:22px;height:22px;border-radius:50%;font-size:.72rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hot-num.top3{background:var(--gold);color:var(--navy-d)}
.hot-num.rest{background:var(--gold-ghost);color:var(--gray)}
.hot-title{font-size:.82rem;font-weight:700;color:var(--navy);line-height:1.35}
.hot-meta{font-size:.7rem;color:var(--gray-l);margin-top:.1rem}
/* Odds widget */
.odds-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem;margin-bottom:.6rem}
.odds-cell{background:var(--gold-pale);border:1px solid var(--border);border-radius:6px;padding:.4rem .3rem;text-align:center;cursor:pointer;transition:.2s}
.odds-cell:hover{background:var(--gold);border-color:var(--gold)}
.odds-cell:hover .oc-label,.odds-cell:hover .oc-val{color:var(--navy-d)}
.oc-label{font-size:.62rem;color:var(--gray-l)}
.oc-val{font-size:.95rem;font-weight:900;color:var(--navy)}
.odds-match-title{font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
/* Score table */
.score-table{width:100%;font-size:.78rem;border-collapse:collapse}
.score-table th{color:var(--gray-l);font-weight:600;padding:.3rem .25rem;text-align:left;border-bottom:1px solid var(--border)}
.score-table td{padding:.4rem .25rem;border-bottom:1px solid var(--gold-ghost)}
.score-table tr:last-child td{border-bottom:none}
.score-live{background:var(--red);color:#fff;font-size:.58rem;font-weight:800;padding:.05rem .3rem;border-radius:2px}

/* ── Guide Section ── */
.guide-section{padding:2.5rem 0;background:var(--white);border-top:1px solid var(--border)}
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.guide-item{background:var(--gold-pale);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem .9rem;font-size:.82rem;font-weight:700;color:var(--navy);text-align:center;transition:.2s}
.guide-item:hover{background:var(--gold);color:var(--navy-d);box-shadow:0 3px 12px rgba(245,158,11,.3)}

/* ── Footer ── */
footer{background:var(--navy-d);color:rgba(255,255,255,.75);padding:2.5rem 0 1.5rem}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-brand-logo{font-size:1.2rem;font-weight:900;color:var(--gold-light);margin-bottom:.65rem}
.footer-brand p{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.5)}
.footer-col h4{font-size:.82rem;font-weight:800;color:var(--gold);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.4rem}
.footer-col ul li a{font-size:.82rem;color:rgba(255,255,255,.55);transition:.15s}
.footer-col ul li a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.25rem;text-align:center;font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.8}

/* ── Responsive ── */
@media(max-width:900px){
  .hero-grid,.content-row{grid-template-columns:1fr}
  .picks-grid,.news-grid{grid-template-columns:1fr 1fr}
  .host-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .picks-grid,.news-grid,.live-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .cd-title{display:none}
}