/* SportsBao - Sports Betting Platform Styles */
:root {
  --color-bg: #0B1628;
  --color-bg-alt: #0F1E35;
  --color-bg-card: #122240;
  --color-primary: #F0A500;
  --color-primary-hover: #FFB800;
  --color-text: #FFFFFF;
  --color-text-muted: #8BA3C7;
  --color-border: #1E3A5F;
  --font-heading: 'Noto Sans SC', -apple-system, sans-serif;
  --font-body: 'Noto Sans SC', -apple-system, sans-serif;
  --radius: 8px;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100dvh}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--color-bg);border-bottom:1px solid var(--color-border);backdrop-filter:blur(12px)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo-wrap{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.logo-wrap img{height:36px;width:auto}
.site-nav{display:flex;align-items:center;gap:.25rem;flex:1;justify-content:center}
.site-nav a{padding:.5rem 1rem;border-radius:var(--radius);font-size:.9rem;font-weight:500;color:var(--color-text-muted);transition:color .2s,background .2s;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--color-primary);background:rgba(240,165,0,.1)}
.nav-toggle{display:none;background:none;border:none;color:var(--color-text);font-size:1.5rem;padding:.5rem}

/* Footer */
.site-footer{background:var(--color-bg-alt);border-top:1px solid var(--color-border);padding:2.5rem 1.5rem;margin-top:4rem}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.footer-brand p{color:var(--color-text-muted);font-size:.85rem;margin-top:.75rem;max-width:320px}
.footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);margin-bottom:.75rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.4rem}
.footer-col a{color:var(--color-text-muted);font-size:.85rem;transition:color .2s}
.footer-col a:hover{color:var(--color-primary)}
.footer-bottom{max-width:1280px;margin:1.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--color-text-muted)}
@media(max-width:768px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;top:64px;left:0;right:0;background:var(--color-bg);border-bottom:1px solid var(--color-border);flex-direction:column;padding:1rem;display:none;gap:.25rem}
  .site-nav.open{display:flex}
  .site-nav a{width:100%;text-align:center;padding:.75rem 1rem}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}

/* Main Layout */
.page-content{max-width:1280px;margin:0 auto;padding:2rem 1.5rem}

/* Homepage */
.home-hero{position:relative;height:480px;overflow:hidden;border-radius:var(--radius);margin-bottom:2.5rem}
.home-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.home-hero-content{position:absolute;bottom:0;left:0;right:0;padding:2.5rem;background:linear-gradient(transparent,rgba(11,22,40,.95))}
.home-hero-content h1{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:.75rem}
.home-hero-content p{color:var(--color-text-muted);font-size:1.1rem;max-width:600px}
.home-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:2.5rem}
.home-block{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s}
.home-block:hover{transform:translateY(-4px);border-color:var(--color-primary)}
.home-block-img{height:180px;overflow:hidden}
.home-block-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.home-block:hover .home-block-img img{transform:scale(1.05)}
.home-block-body{padding:1.25rem}
.home-block-body h3{font-size:1.05rem;margin-bottom:.5rem}
.home-block-body p{color:var(--color-text-muted);font-size:.85rem;line-height:1.5}

/* Sections */
section{margin-bottom:2.5rem}
.section-title{font-size:1.5rem;font-weight:700;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--color-primary);display:inline-block}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.article-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.article-card-img{height:200px;overflow:hidden;flex-shrink:0}
.article-card-img img{width:100%;height:100%;object-fit:cover}
.article-card-body{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.article-card-meta{font-size:.75rem;color:var(--color-primary);margin-bottom:.5rem}
.article-card-body h3{font-size:1.05rem;margin-bottom:.5rem;line-height:1.4}
.article-card-body p{color:var(--color-text-muted);font-size:.85rem;flex:1}
.article-card-body .read-more{display:inline-block;margin-top:1rem;color:var(--color-primary);font-size:.85rem;font-weight:600;transition:color .2s}
.article-card-body .read-more:hover{color:var(--color-primary-hover)}

/* Article Page Layout */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start}
.article-main{flex:1}
.article-header{margin-bottom:2rem}
.article-header .category-tag{font-size:.75rem;color:var(--color-primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;display:block}
.article-header h1{font-size:2rem;line-height:1.3;margin-bottom:1rem}
.article-meta{font-size:.8rem;color:var(--color-text-muted);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border)}
.article-cover{height:400px;overflow:hidden;border-radius:var(--radius);margin-bottom:2rem}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-body{font-size:1rem;line-height:1.8;color:var(--color-text)}
.article-body h2{font-size:1.4rem;margin:2rem 0 1rem;color:var(--color-primary)}
.article-body p{margin-bottom:1.25rem}
.article-body ul{margin:1rem 0 1.5rem 1.5rem;list-style:disc}
.article-body li{margin-bottom:.5rem}
.article-body strong{color:var(--color-primary)}
.article-body .summary-box{background:var(--color-bg-card);border-left:4px solid var(--color-primary);padding:1.25rem;margin:2rem 0;border-radius:0 var(--radius) var(--radius) 0}
.article-body .faq-section{margin-top:2.5rem}
.article-body .faq-item{margin-bottom:1.5rem;padding:1rem;background:var(--color-bg-alt);border-radius:var(--radius)}
.article-body .faq-item h3{font-size:1.05rem;margin-bottom:.5rem}

/* Related Sidebar */
.related-sidebar{position:sticky;top:80px}
.related-sidebar h3{font-size:1rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-primary)}
.related-list{list-style:none;display:flex;flex-direction:column;gap:1rem}
.related-item{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.related-item:hover{border-color:var(--color-primary)}
.related-item img{height:120px;width:100%;object-fit:cover}
.related-item-body{padding:.75rem}
.related-item-body h4{font-size:.85rem;line-height:1.4}
.related-item-body a:hover{color:var(--color-primary)}

/* Category Page */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.breadcrumb{font-size:.8rem;color:var(--color-text-muted);margin-bottom:1.5rem;display:flex;gap:.5rem;align-items:center}
.breadcrumb a{color:var(--color-primary);transition:opacity .2s}
.breadcrumb a:hover{opacity:.8}
.breadcrumb span{color:var(--color-text-muted)}

/* CTA Section */
.cta-section{background:var(--color-bg-card);border:1px solid var(--color-primary);border-radius:var(--radius);padding:2.5rem;text-align:center}
.cta-section h2{font-size:1.75rem;margin-bottom:.75rem}
.cta-section p{color:var(--color-text-muted);margin-bottom:1.5rem}
.btn-primary{display:inline-block;background:var(--color-primary);color:#0B1628;font-weight:700;padding:.75rem 2rem;border-radius:var(--radius);font-size:1rem;transition:background .2s,transform .2s}
.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px)}

/* Stats Bar */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.5rem;padding:1.5rem;background:var(--color-bg-card);border-radius:var(--radius);border:1px solid var(--color-border)}
.stat-item{text-align:center}
.stat-item .num{font-size:2rem;font-weight:800;color:var(--color-primary);line-height:1}
.stat-item .label{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}

/* Feature Grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2.5rem}
.feature-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem;text-align:center;transition:border-color .2s}
.feature-card:hover{border-color:var(--color-primary)}
.feature-icon{width:48px;height:48px;margin:0 auto 1rem;background:rgba(240,165,0,.15);border-radius:50%;display:flex;align-items:center;justify-content:center}
.feature-icon svg{width:24px;height:24px;stroke:var(--color-primary)}
.feature-card h3{font-size:1rem;margin-bottom:.5rem}
.feature-card p{font-size:.85rem;color:var(--color-text-muted)}
@media(max-width:768px){
  .feature-grid,.article-grid,.category-grid{grid-template-columns:1fr}
  .article-layout{grid-template-columns:1fr}
  .related-sidebar{position:static}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .home-hero{height:320px}
  .home-hero-content h1{font-size:1.75rem}
}

/* JSON-LD */