*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green:#0B6E4F; --green-l:#14A370; --green-d:#063D2B; --gold:#C9A227; --gold-l:#F0C84A;
  --dark:#0A0F0D; --dark-2:#111A14; --dark-3:#182019; --mid:#243027; --mid-2:#1a2820;
  --text:#E8EDE9; --text-m:#9EB5A3; --text-s:#7a9484; --border:rgba(255,255,255,0.07); --border-h:rgba(255,255,255,0.15);
  --radius:12px; --radius-sm:8px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  background: var(--dark); color: var(--text); line-height: 1.75; overflow-x: hidden;
}
a { color:#fff; text-decoration:none; transition:color .2s; }
a:hover { color:var(--gold); }
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* NAV */
nav {
  position:sticky; top:0; z-index:100;
  background:rgba(10,15,13,.93); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 clamp(1rem,5vw,4rem);
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.nav-brand { display:flex; align-items:center; gap:10px; font-family:'Noto Serif SC',serif; font-size:1.1rem; font-weight:700; color:var(--text); text-decoration:none; }
.nav-brand span { color:var(--gold); }
.nav-badge { background:var(--gold); color:var(--dark); font-size:.6rem; font-weight:700; padding:2px 7px; border-radius:4px; }
.nav-toggle {
  display:none; background:none; border:1px solid var(--border); color:var(--text);
  font-size:1.4rem; cursor:pointer; padding:6px 10px; border-radius:var(--radius-sm);
  transition:background .2s;
}
.nav-toggle:hover { background:var(--mid); }
.nav-links { display:flex; gap:1.75rem; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; font-size:.875rem; font-weight:500; color:#fff; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { background:var(--green)!important; color:#fff!important; padding:8px 20px; border-radius:8px; transition:background .2s!important; }
.nav-cta:hover { background:var(--green-l)!important; }

/* LIVE ODDS TICKER */
.live-odds-ticker { background:var(--green); padding:8px clamp(1rem,5vw,4rem); display:flex; align-items:center; gap:1.5rem; overflow:hidden; }
.ticker-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.75); flex-shrink:0; }
.ticker-wrap { overflow:hidden; flex:1; }
.ticker-items { display:flex; gap:2.5rem; align-items:center; animation:ticker 38s linear infinite; width:max-content; }
.ticker-item { display:flex; align-items:center; gap:8px; color:#fff; }
.ticker-odds { }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* BREADCRUMB */
.breadcrumb { font-size:.8rem; color:var(--text-m); padding:.75rem clamp(1rem,5vw,4rem); background:var(--dark-3); border-bottom:1px solid var(--border); }
.breadcrumb a { text-decoration:none; color:var(--text-m); }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span, .breadcrumb sep { margin:0 6px; }

/* HERO */
.hero {
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(3rem,10vw,8rem) clamp(1rem,5vw,4rem); overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,rgba(11,110,79,.25) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%,rgba(201,162,39,.1) 0%,transparent 60%),
    linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 100%);
}
.hero-pitch {
  position:absolute; bottom:-10%; left:50%; transform:translateX(-50%);
  width:140%; height:60%;
  background:
    repeating-linear-gradient(90deg,rgba(11,110,79,.06) 0,rgba(11,110,79,.06) 1px,transparent 1px,transparent 80px),
    repeating-linear-gradient(0deg,rgba(11,110,79,.06) 0,rgba(11,110,79,.06) 1px,transparent 1px,transparent 80px);
  border-radius:50% 50% 0 0/20% 20% 0 0;
  border-top:1px solid rgba(11,110,79,.2);
}
.hero-content { position:relative; z-index:2; max-width:920px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,162,39,.15); border:1px solid rgba(201,162,39,.3);
  color:var(--gold-l); font-size:.78rem; font-weight:600; letter-spacing:.08em;
  padding:6px 18px; border-radius:100px; margin-bottom:2rem;
}
.hero h1 {
  font-family:'Noto Serif SC',serif;
  font-size:clamp(2.2rem,6vw,5.2rem);
  font-weight:900; line-height:1.2; letter-spacing:.02em; margin-bottom:1.5rem;
}
.hero h1 em { font-style:normal; color:var(--gold); display:block; }
.hero-sub { font-size:clamp(.9rem,1.7vw,1.1rem); color:var(--text-m); max-width:640px; margin:0 auto 2.5rem; font-weight:300; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--green),var(--green-l));
  color:#fff; font-weight:600; font-size:.95rem;
  padding:14px 32px; border-radius:var(--radius);
  text-decoration:none; border:none; cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 24px rgba(20,163,112,.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(20,163,112,.45); color:#fff; }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:#fff; font-weight:500; font-size:.95rem;
  padding:14px 32px; border-radius:var(--radius);
  text-decoration:none; border:1px solid var(--border);
  transition:border-color .2s,background .2s;
}
.btn-secondary:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; }
.hero-stats { display:flex; gap:3rem; justify-content:center; flex-wrap:wrap; margin-top:4rem; }
.stat-item { text-align:center; }
.stat-num { font-family:'Noto Serif SC',serif; font-size:2.5rem; font-weight:900; color:var(--gold); line-height:1; }
.stat-label { font-size:.78rem; color:var(--text-m); margin-top:4px; }

/* COUNTDOWN */
.countdown-bar {
  background:var(--dark-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1.25rem clamp(1rem,5vw,4rem);
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
}
.countdown-label { font-size:.78rem; color:var(--text-m); }
.countdown-units { display:flex; gap:1rem; align-items:center; }
.cd-unit { text-align:center; }
.cd-num { font-family:'DM Mono',monospace; font-size:1.8rem; font-weight:500; color:var(--gold); line-height:1; min-width:2.5ch; display:block; }
.cd-label { font-size:.65rem; color:var(--text-m); }
.cd-sep { font-size:1.5rem; color:var(--border); margin-bottom:1rem; }

/* SECTIONS */
section { position:relative; padding:clamp(3rem,8vw,6rem) clamp(1rem,5vw,4rem); }
.section-inner { max-width:1200px; margin:0 auto; }
.section-tag { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green-l); margin-bottom:.75rem; }
.section-title { font-family:'Noto Serif SC',serif; font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:700; line-height:1.3; margin-bottom:1rem; }
.section-sub { font-size:.93rem; color:var(--text-m); max-width:640px; margin-bottom:3rem; font-weight:300; }
.divider { width:48px; height:3px; background:linear-gradient(90deg,var(--gold),transparent); margin-bottom:1.5rem; border-radius:2px; }

/* ODDS */
.odds-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
.odds-card {
  text-decoration: none;color:#fff;
  background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
  transition:border-color .2s,transform .2s; position:relative; overflow:hidden;
}
.odds-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold),transparent); border-radius:2px 0 0 2px; }
.odds-card.favorite::before { background:linear-gradient(180deg,var(--green-l),transparent); }
.odds-card:hover { border-color:rgba(201,162,39,.3); transform:translateY(-2px); }
.team-info { display:flex; align-items:center; gap:12px; }
.team-flag { font-size:1.8rem; line-height:1; }
.team-name { font-weight:600; font-size:.95rem; }
.team-rank { font-size:.72rem; color:var(--text-m); }
.team-odds { font-family:'DM Mono',monospace; font-size:1.2rem; font-weight:500; color:var(--gold); }
.odds-card.favorite .team-odds { color:var(--green-l); }

/* BOOKS */
.books-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem; }
.book-card {
  background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; transition:border-color .2s,transform .2s; position:relative;
}
.book-card:hover { border-color:rgba(20,163,112,.3); transform:translateY(-3px); }
.book-card.top-pick { border-color:rgba(201,162,39,.3); background:linear-gradient(135deg,var(--dark-2),rgba(201,162,39,.05)); }
.book-badge { position:absolute; top:-12px; left:1.75rem; background:var(--gold); color:var(--dark); font-size:.65rem; font-weight:700; letter-spacing:.08em; padding:4px 12px; border-radius:100px; }
.book-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.book-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:var(--mid); }
.book-name { font-weight:700; font-size:1.05rem; }
.book-tagline { font-size:.8rem; color:var(--text-m); }
.book-bonus { background:rgba(11,110,79,.15); border:1px solid rgba(11,110,79,.2); border-radius:8px; padding:.75rem 1rem; font-size:.85rem; color:var(--green-l); font-weight:600; margin-bottom:1rem; }
.book-features { list-style:none; margin-bottom:1.25rem; }
.book-features li { font-size:.85rem; color:var(--text-m); padding:4px 0; display:flex; align-items:center; gap:8px; }
.book-features li::before { content:'\2713'; color:var(--green-l); font-weight:700; }
.book-cta { display:block; text-align:center; background:var(--green); color:#fff; font-weight:600; font-size:.9rem; padding:12px; border-radius:8px; text-decoration:none; transition:background .2s; }
.book-cta:hover { background:var(--green-l); color:#fff; }
.book-disclaimer { font-size:.7rem; color:var(--text-m); text-align:center; margin-top:.5rem; }

/* BET TYPES */
.bet-types-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.bet-type-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:border-color .2s; }
.bet-type-card:hover { border-color:rgba(255,255,255,.15); }
.bet-icon { font-size:1.75rem; margin-bottom:.75rem; display:block; }
.bet-name { font-weight:700; font-size:1rem; margin-bottom:.4rem; }
.bet-desc { font-size:.85rem; color:var(--text-m); line-height:1.8; }
.bet-example { margin-top:.75rem; padding:.5rem .75rem; background:var(--dark-3); border-radius:6px; font-family:'DM Mono',monospace; font-size:.78rem; color:var(--gold); }

/* SCHEDULE */
.schedule-section { background:var(--dark-2); }
.schedule-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.schedule-table th { text-align:left; padding:.75rem 1rem; font-size:.72rem; letter-spacing:.08em; color:var(--text-m); border-bottom:1px solid var(--border); }
.schedule-table td { padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); }
.schedule-table tr:hover td { background:rgba(255,255,255,.02); }
.phase-badge { font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:100px; }
.phase-group { background:rgba(11,110,79,.2); color:var(--green-l); }
.phase-r32 { background:rgba(201,162,39,.15); color:var(--gold-l); }
.phase-final { background:rgba(220,100,100,.15); color:#F87171; }

/* TIPS */
.tips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.tip-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; }
.tip-num { font-family:'Noto Serif SC',serif; font-size:3rem; font-weight:900; color:var(--border); line-height:1; margin-bottom:.5rem; }
.tip-title { font-weight:700; font-size:1.05rem; margin-bottom:.5rem; }
.tip-text { font-size:.875rem; color:var(--text-m); line-height:1.85; }

/* FAQ */
.faq-section { background:var(--dark-2); }
.faq-list { max-width:780px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.75rem; overflow:hidden; }
.faq-q { width:100%; background:var(--dark-3); border:none; padding:1.1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; font-family:inherit; font-size:.95rem; font-weight:600; color:var(--text); gap:1rem; }
.faq-q:hover { background:var(--mid); }
.faq-chevron { color:var(--gold); font-size:1.1rem; transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-a { display:none; padding:1.1rem 1.5rem; font-size:.875rem; color:var(--text-m); line-height:1.9; background:var(--dark-3); border-top:1px solid var(--border); }
.faq-item.open .faq-a { display:block; }

/* RG */
.rg-bar { background:rgba(11,110,79,.1); border:1px solid rgba(11,110,79,.2); border-radius:var(--radius); padding:1.25rem 1.75rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:3rem; }
.rg-icon { font-size:1.5rem; flex-shrink:0; }
.rg-text { font-size:.85rem; color:var(--text-m); }
.rg-text strong { color:var(--text); }
.rg-links { margin-left:auto; display:flex; gap:1rem; flex-wrap:wrap; }
.rg-link { font-size:.8rem; color:var(--green-l); text-decoration:none; font-weight:600; border:1px solid rgba(20,163,112,.3); padding:6px 14px; border-radius:6px; transition:background .2s; }
.rg-link:hover { background:rgba(20,163,112,.1); }

/* FOOTER */
footer { background:var(--dark-3); border-top:1px solid var(--border); padding:clamp(2rem,5vw,4rem) clamp(1rem,5vw,4rem); }
.footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand { font-family:'Noto Serif SC',serif; font-size:1.1rem; font-weight:700; margin-bottom:.75rem; }
.footer-brand span { color:var(--gold); }
.footer-about { font-size:.82rem; color:var(--text-m); line-height:1.85; }
.footer-col h4 { font-size:.78rem; font-weight:600; letter-spacing:.06em; color:var(--text-m); margin-bottom:1rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a { text-decoration:none; font-size:.85rem; color:var(--text-m); }
.footer-col a:hover { color:#fff; }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:2rem; border-top:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-legal { font-size:.75rem; color:var(--text-m); line-height:1.85; max-width:720px; }
.footer-copy { font-size:.75rem; color:var(--text-m); }

/* ANIM */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* CATEGORY PAGE */
.page-wrap { max-width:1200px; margin:0 auto; padding:2.5rem clamp(1rem,5vw,4rem); display:grid; grid-template-columns:1fr 280px; gap:2.5rem; align-items:start; }
.cat-header { position:relative; overflow:hidden; padding:clamp(2.5rem,6vw,4rem) clamp(1rem,5vw,4rem); background:linear-gradient(135deg, var(--dark-2), var(--dark-3)); border-bottom:1px solid var(--border); }
.cat-header::before { content:''; position:absolute; top:-40%; right:-5%; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.12) 0%,transparent 65%); pointer-events:none; }
.cat-header-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cat-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-l); background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.25); padding:4px 13px; border-radius:100px; margin-bottom:1rem; }
.cat-header h1 { font-family:'Noto Serif SC',serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; line-height:1.2; margin-bottom:.75rem; }
.cat-header h1 span { color:var(--gold); }
.cat-header-desc { font-size:.93rem; color:var(--text-m); max-width:560px; line-height:1.8; font-weight:300; }
.cat-header-stats { display:flex; gap:2rem; flex-shrink:0; }
.chs-item { text-align:center; }
.chs-num { font-family:'DM Mono',monospace; font-size:2rem; font-weight:500; color:var(--gold); line-height:1; }
.chs-label { font-size:.7rem; color:var(--text-s); margin-top:4px; }
.sort-bar { max-width:1200px; margin:0 auto; padding:1rem clamp(1rem,5vw,4rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.sort-left { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-s); }
.sort-count { font-family:'DM Mono',monospace; color:var(--green-l); font-weight:600; }
.sort-right { display:flex; align-items:center; gap:.5rem; }
.sort-label { font-size:.75rem; color:var(--text-s); }
.sort-select { background:var(--dark-2); border:1px solid var(--border); color:var(--text-m); font-family:inherit; font-size:.8rem; padding:6px 12px; border-radius:var(--radius-sm); cursor:pointer; outline:none; transition:border-color .2s; }
.sort-select:hover { border-color:var(--border-h); }
.view-btns { display:flex; gap:.25rem; }
.view-btn { width:32px; height:32px; border-radius:var(--radius-sm); background:var(--dark-2); border:1px solid var(--border); color:var(--text-s); font-size:.9rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.view-btn.active, .view-btn:hover { border-color:var(--border-h); color:var(--text); background:var(--mid); }

/* ARTICLE LIST */
.feat-card { display:grid; grid-template-columns:280px 1fr; background:var(--dark-2); border:1px solid rgba(201,162,39,.2); border-radius:var(--radius); overflow:hidden; margin-bottom:1.5rem; transition:border-color .2s, transform .2s; text-decoration:none; }
.feat-card:hover { border-color:rgba(201,162,39,.4); transform:translateY(-2px); }
.feat-thumb { background:linear-gradient(135deg,var(--green-d),var(--mid-2)); display:flex; align-items:center; justify-content:center; font-size:4rem; position:relative; overflow:hidden; }
.feat-thumb::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 28px); }
.feat-thumb-em { position:relative; z-index:1; }
.feat-badge { position:absolute; top:.9rem; left:.9rem; z-index:2; background:var(--gold); color:var(--dark); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:100px; }
.feat-body { padding:1.75rem; display:flex; flex-direction:column; justify-content:space-between; }
.feat-cat { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-l); margin-bottom:.6rem; }
.feat-title { font-family:'Noto Serif SC',serif; font-size:1.3rem; font-weight:700; line-height:1.35; color:var(--text); margin-bottom:.75rem; }
.feat-excerpt { font-size:.85rem; color:var(--text-m); line-height:1.8; flex:1; margin-bottom:1rem; }
.feat-meta { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.feat-meta span { font-size:.75rem; color:var(--text-s); display:flex; align-items:center; gap:4px; }
.feat-read-more { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--green),var(--green-l)); color:#fff; font-size:.8rem; font-weight:600; padding:8px 18px; border-radius:var(--radius-sm); text-decoration:none; transition:opacity .2s; margin-top:1rem; align-self:flex-start; }
.feat-read-more:hover { opacity:.88; color:#fff; }

.article-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1.5rem; }
.art-row { display:grid; grid-template-columns:160px 1fr; background:var(--dark-2); text-decoration:none; transition:background .18s; }
.art-row:hover { background:var(--dark-3); }
.art-row:hover .art-arrow { color:var(--gold); transform:translateX(3px); }
.art-thumb { display:flex; align-items:center; justify-content:center; font-size:2.2rem; min-height:130px; position:relative; overflow:hidden; }
.art-thumb::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 20px); }
.art-thumb-em { position:relative; z-index:1; }
.t-green  { background:linear-gradient(135deg,var(--green-d),var(--mid)); }
.t-gold   { background:linear-gradient(135deg,#3d2a00,#2a1e00); }
.t-blue   { background:linear-gradient(135deg,#0d1f3c,#1a2e4a); }
.t-red    { background:linear-gradient(135deg,#2d0e0e,#1f0808); }
.t-purple { background:linear-gradient(135deg,#1e0d35,#2d1550); }
.t-teal   { background:linear-gradient(135deg,#0d2a2a,#143030); }
.t-olive  { background:linear-gradient(135deg,#1a2000,#262e00); }
.art-body { padding:1.25rem 1.5rem 1.25rem 1.25rem; display:flex; flex-direction:column; justify-content:space-between; gap:.5rem; }
.art-top { flex:1; }
.art-badges { display:flex; gap:.5rem; margin-bottom:.55rem; flex-wrap:wrap; }
.abadge { font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:100px; letter-spacing:.06em; text-transform:uppercase; }
.ab-hot    { background:rgba(239,68,68,.2);  color:#f87171; border:1px solid rgba(239,68,68,.25); }
.ab-new    { background:rgba(20,163,112,.18); color:var(--green-l); border:1px solid rgba(20,163,112,.28); }
.ab-pick   { background:rgba(201,162,39,.18); color:var(--gold-l); border:1px solid rgba(201,162,39,.28); }
.art-title { font-weight:700; font-size:.95rem; color:var(--text); line-height:1.5; margin-bottom:.4rem; }
.art-excerpt { font-size:.82rem; color:var(--text-m); line-height:1.75; }
.art-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.art-meta { display:flex; gap:1rem; flex-wrap:wrap; }
.art-meta span { font-size:.72rem; color:var(--text-s); }
.art-arrow { font-size:.9rem; color:var(--text-s); transition:color .2s, transform .2s; }

.article-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.5rem; }
.art-grid-card { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:border-color .18s, transform .18s; display:flex; flex-direction:column; }
.art-grid-card:hover { border-color:var(--border-h); transform:translateY(-2px); }
.agc-thumb { height:130px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; position:relative; overflow:hidden; }
.agc-thumb::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 20px); }
.agc-em { position:relative; z-index:1; }
.agc-body { padding:1.1rem; flex:1; display:flex; flex-direction:column; }
.agc-badges { display:flex; gap:.4rem; margin-bottom:.5rem; }
.agc-title { font-weight:700; font-size:.88rem; color:var(--text); line-height:1.5; flex:1; }
.agc-meta { display:flex; justify-content:space-between; margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--border); }
.agc-meta span { font-size:.7rem; color:var(--text-s); }

.pagination { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:2rem; }
.pg-btn { min-width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; background:var(--dark-2); border:1px solid var(--border); color:var(--text-m); font-size:.82rem; font-weight:500; text-decoration:none; transition:all .18s; padding:0 .5rem; }
.pg-btn:hover { border-color:var(--border-h); color:var(--text); }
.pg-btn.active { background:var(--green); border-color:var(--green); color:#fff; }
.pg-btn.disabled { opacity:.3; pointer-events:none; }
.pg-dots { color:var(--text-s); padding:0 .25rem; font-size:.82rem; }

/* SIDEBAR */
.sidebar { position:sticky; top:80px; display:flex; flex-direction:column; gap:1.25rem; }
.sb { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sb-head { padding:.9rem 1.15rem; border-bottom:1px solid var(--border); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-s); display:flex; align-items:center; gap:6px; }
.sb-body { padding:1.15rem; }

.cat-nav-list { list-style:none; }
.cat-nav-item { margin-bottom:2px; }
.cat-nav-link { display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; border-radius:var(--radius-sm); text-decoration:none; font-size:.85rem; color:var(--text-m); transition:background .15s, color .15s; }
.cat-nav-link:hover { background:var(--mid); color:var(--text); }
.cat-nav-link.active { background:rgba(11,110,79,.18); color:var(--green-l); font-weight:600; }
.cat-nav-left { display:flex; align-items:center; gap:.6rem; }
.cat-nav-icon { font-size:1rem; width:1.5rem; text-align:center; }
.cat-nav-count { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--text-s); background:var(--dark-3); padding:2px 7px; border-radius:100px; }
.cat-nav-link.active .cat-nav-count { color:var(--green-l); background:rgba(20,163,112,.15); }

.pop-item { display:flex; gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--border); text-decoration:none; }
.pop-item:last-child { border-bottom:none; padding-bottom:0; }
.pop-item:first-child { padding-top:0; }
.pop-num { font-family:'DM Mono',monospace; font-size:1.1rem; font-weight:500; color:var(--border); width:1.5rem; flex-shrink:0; line-height:1.4; }
.pop-num.top3 { color:var(--gold); }
.pop-text { flex:1; min-width:0; }
.pop-title { font-size:.83rem; font-weight:600; color:var(--text); line-height:1.45; margin-bottom:.2rem; }
.pop-title:hover { color:var(--gold); }
.pop-meta { font-size:.7rem; color:var(--text-s); }

.odds-widget-row { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--border); }
.odds-widget-row:last-child { border-bottom:none; }
.ow-flag { font-size:1.2rem; }
.ow-name { font-size:.83rem; font-weight:600; flex:1; }
.ow-price { font-family:'DM Mono',monospace; font-size:.86rem; color:var(--gold); }
.ow-chg { font-size:.64rem; padding:2px 5px; border-radius:4px; }
.ow-up   { background:rgba(20,163,112,.15); color:var(--green-l); }
.ow-dn   { background:rgba(239,68,68,.12);  color:#f87171; }
.ow-flat { background:rgba(255,255,255,.05); color:var(--text-s); }

.tag-cloud { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag-pill { font-size:.74rem; color:var(--text-m); background:var(--dark-3); border:1px solid var(--border); border-radius:100px; padding:4px 11px; text-decoration:none; transition:all .18s; }
.tag-pill:hover { border-color:var(--green-l); color:var(--green-l); }

.promo-card { background:linear-gradient(135deg,var(--green-d),var(--mid)); border:1px solid rgba(20,163,112,.3); border-radius:var(--radius); padding:1.25rem; }
.promo-icon { font-size:1.75rem; margin-bottom:.6rem; }
.promo-name { font-weight:700; font-size:.95rem; margin-bottom:.3rem; }
.promo-bonus { font-size:.8rem; color:var(--gold-l); font-weight:600; margin-bottom:.9rem; background:rgba(255,255,255,.08); padding:.5rem .75rem; border-radius:var(--radius-sm); }
.promo-cta { display:block; text-align:center; background:var(--gold); color:var(--dark); font-weight:700; font-size:.85rem; padding:9px; border-radius:var(--radius-sm); text-decoration:none; transition:opacity .2s; }
.promo-cta:hover { opacity:.9; color:var(--dark); }
.promo-dis { font-size:.67rem; color:rgba(255,255,255,.35); text-align:center; margin-top:.4rem; }

/* ARTICLE PAGE */
.article-detail { max-width:800px; margin:0 auto; padding:clamp(2rem,5vw,4rem) clamp(1rem,5vw,4rem); }
.article-detail h1 { font-family:'Noto Serif SC',serif; font-size:clamp(1.5rem,4vw,2.5rem); font-weight:700; line-height:1.3; margin-bottom:1.5rem; }
.article-detail .meta { font-size:.82rem; color:var(--text-m); margin-bottom:2rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.article-detail .meta a { text-decoration:none; color:var(--green-l); }
.article-detail .meta a:hover { text-decoration:underline; color:var(--gold); }
.article-detail .content h2, .article-detail .content h3, .article-detail .content h4, .article-detail .content h5, .article-detail .content h6 { font-family:'Noto Serif SC',serif; font-weight:700; margin:1.5rem 0 1rem; line-height:1.4; }
.article-detail .content h2 { font-size:1.5rem; border-bottom:1px solid var(--border); padding-bottom:.5rem; }
.article-detail .content h3 { font-size:1.25rem; }
.article-detail .content p { margin-bottom:1.25rem; line-height:1.9; color:var(--text-m); }
.article-detail .content a { color:var(--green-l); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--green-l); transition:text-decoration-color .2s; }
.article-detail .content a:hover { text-decoration-color:var(--gold); color:var(--gold); }
.article-detail .content ul, .article-detail .content ol { margin-bottom:1.25rem; padding-left:1.5rem; }
.article-detail .content li { margin-bottom:.5rem; color:var(--text-m); }
.article-detail .content blockquote { border-left:3px solid var(--gold); padding-left:1.25rem; margin:1.5rem 0; font-style:italic; color:var(--text-m); }
.article-detail .content code { background:var(--dark-3); padding:2px 6px; border-radius:4px; font-family:'DM Mono',monospace; font-size:.9em; }
.article-detail .content pre { background:var(--dark-3); border:1px solid var(--border); border-radius:8px; padding:1rem; overflow-x:auto; margin:1.5rem 0; }
.article-detail .content pre code { background:none; padding:0; }
.article-detail .content img { max-width:100%; border-radius:8px; margin:1rem 0; }
.article-detail .content table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.article-detail .content th, .article-detail .content td { padding:.75rem; border:1px solid var(--border); text-align:left; }
.article-detail .content th { background:var(--dark-3); font-weight:600; }

/* ARTICLE NAV */
.article-nav a { color:var(--text); }
.article-nav a:hover { color:var(--gold); }

/* RELATED ARTICLES */
.related-section { background:var(--dark-2); padding:clamp(2rem,5vw,4rem) clamp(1rem,5vw,4rem); }
.related-section .container { max-width:1200px; margin:0 auto; }
.related-title { font-family:'Noto Serif SC',serif; font-size:1.4rem; font-weight:700; margin-bottom:1.5rem; }
.related-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.related-item { background:var(--dark-3); border:1px solid var(--border); border-radius:8px; padding:1rem; display:block; text-decoration:none; color:inherit; transition:border-color .2s; }
.related-item:hover { border-color:rgba(201,162,39,.3); }
.related-item h4 { font-weight:600; font-size:.9rem; line-height:1.5; margin-bottom:.3rem; color:var(--text); }
.related-item p { font-size:.78rem; color:var(--text-m); }

/* CONTACT PAGE */
.contact-section { max-width:600px; margin:0 auto; padding:clamp(2rem,5vw,4rem) clamp(1rem,5vw,4rem); }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.contact-form label { font-size:.85rem; font-weight:600; }
.contact-form input, .contact-form textarea { background:var(--dark-2); border:1px solid var(--border); border-radius:8px; padding:1rem; color:var(--text); font-family:inherit; font-size:.9rem; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--gold); }
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-info { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin-top:2rem; }
.contact-info h3 { font-weight:600; margin-bottom:1rem; }
.contact-info p { font-size:.9rem; color:var(--text-m); margin-bottom:.5rem; }
.contact-info a { color:var(--green-l); }

/* ABOUT PAGE */
.about-header { margin-bottom:2rem; }
.about-header h1 { font-family:'Noto Serif SC',serif; font-size:clamp(1.8rem,4vw,2.5rem); font-weight:700; margin-bottom:1rem; }
.about-desc { font-size:.93rem; color:var(--text-m); line-height:1.8; }
.about-item { padding:1.25rem 0; border-bottom:1px solid var(--border); }
.about-item:last-child { border-bottom:none; }
.about-item-title { font-weight:700; font-size:1.05rem; margin-bottom:.4rem; }
.about-item-title a { color:var(--text); }
.about-item-title a:hover { color:var(--gold); }
.about-item-desc { font-size:.85rem; color:var(--text-m); line-height:1.8; margin-bottom:.3rem; }
.about-item-meta { font-size:.75rem; color:var(--text-s); }
.about-empty { text-align:center; padding:3rem; color:var(--text-m); }

/* RESPONSIVE */
@media(max-width:960px) {
  .page-wrap { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .feat-card { grid-template-columns:1fr; }
  .feat-thumb { min-height:180px; }
}
@media(max-width:768px) {
  .nav-toggle { display:block; }
  .nav-links {
    display:none; position:fixed; top:64px; left:0; right:0; bottom:0;
    background:rgba(10,15,13,.98); backdrop-filter:blur(20px);
    flex-direction:column; align-items:center; justify-content:center; gap:2rem;
    z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1.1rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero-stats { gap:1.5rem; }
  .rg-links { margin-left:0; }
  .cat-header-inner { flex-direction:column; }
  .cat-header-stats { margin-top:1rem; }
  .art-row { grid-template-columns:1fr; }
  .art-thumb { min-height:80px; }
  .schedule-table { font-size:.8rem; }
  .schedule-table th, .schedule-table td { padding:.5rem; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:2rem; }
  .hero-sub { font-size:.85rem; }
  .btn-primary, .btn-secondary { padding:12px 24px; font-size:.88rem; }
  .article-detail .content h2 { font-size:1.25rem; }
  .article-detail .content h3 { font-size:1.1rem; }
}

/* GUIDES SECTION */
.guides-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1rem; margin-top:2rem;
}
.guide-card {
  display:flex; gap:1rem;
  background:var(--dark-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem;
  transition:border-color .2s, background .2s;
}
.guide-card:hover { border-color:var(--border-h); background:var(--dark-3); }
.guide-num {
  flex-shrink:0;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff;
  font-weight:700; font-size:.9rem;
  border-radius:50%;
}
.guide-content { flex:1; min-width:0; }
.guide-content h3 {
  font-size:.95rem; font-weight:600; margin-bottom:.35rem;
  line-height:1.5;
}
.guide-content h3 a { color:var(--text); text-decoration:none; }
.guide-content h3 a:hover { color:var(--gold); }
.guide-desc {
  font-size:.82rem; color:var(--text-m); line-height:1.7;
  margin:0;
}

/* PLATFORM REVIEWS SECTION */
.platforms-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1rem; margin-top:2rem;
}
.platform-card {
  background:var(--dark-3); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem;
  transition:border-color .2s;
}
.platform-card:hover { border-color:var(--gold); }
.platform-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.platform-rank {
  flex-shrink:0;
  background:var(--gold); color:var(--dark);
  font-weight:700; font-size:.75rem;
  padding:2px 8px; border-radius:4px;
}
.platform-header h3 {
  font-size:.95rem; font-weight:600; margin:0;
}
.platform-header h3 a { color:var(--text); text-decoration:none; }
.platform-header h3 a:hover { color:var(--gold); }
.platform-desc {
  font-size:.82rem; color:var(--text-m); line-height:1.7;
  margin:0 0 .6rem;
}
.platform-meta { display:flex; align-items:center; gap:.5rem; }
.platform-category {
  font-size:.75rem; color:var(--green-l);
  background:rgba(11,110,79,.15);
  padding:2px 8px; border-radius:4px;
}

/* RESPONSIVE FOR NEW SECTIONS */
@media(max-width:768px) {
  .guides-grid, .platforms-grid { grid-template-columns:1fr; }
  .guide-card, .platform-card { padding:1rem; }
}