@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* ===== CSS Variables ===== */
:root {
  --red:       #c0182a;
  --red-dark:  #8b0f1e;
  --red-light: #e8394a;
  --gold:      #d4a017;
  --gold-light:#f0c842;
  --black:     #0e0e0e;
  --bg:        #f7f4f0;
  --bg2:       #fff;
  --text:      #1a1a1a;
  --text2:     #555;
  --text3:     #999;
  --border:    #e8e0d8;
  --radius:    10px;
  --shadow:    0 2px 12px rgba(0,0,0,.08);
}

/* ===== Reset ===== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans SC',sans-serif;
  font-size:14px;color:var(--text);
  background:var(--bg);
  min-height:100vh;
  padding-bottom:65px;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{border:none;outline:none;cursor:pointer;background:none;font-family:inherit}

/* ===== TOP HEADER ===== */
.hd{
  position:sticky;top:0;z-index:200;
  background:linear-gradient(135deg,var(--red-dark) 0%,var(--red) 60%,#e03048 100%);
  padding:0 14px;height:52px;
  display:flex;align-items:center;justify-content:space-between;
}
.hd-logo{
  display:flex;align-items:center;gap:8px;
  font-family:'Noto Serif SC',serif;
  font-size:21px;font-weight:900;color:#fff;
  letter-spacing:1px;
}
.hd-logo .dragon{
  width:32px;height:32px;
  background:var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  box-shadow:0 0 0 3px rgba(212,160,23,.3);
}
.hd-logo sub{
  font-size:10px;font-weight:300;letter-spacing:0;
  background:rgba(255,255,255,.2);
  padding:1px 6px;border-radius:3px;
  vertical-align:middle;margin-left:4px;
}
.hd-actions{display:flex;gap:14px;color:#fff;font-size:19px}
.hd-actions span{opacity:.9}

/* ===== TAB BAR ===== */
.tabs{
  background:var(--bg2);
  border-bottom:2px solid var(--border);
  display:flex;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:52px;z-index:190;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex-shrink:0;padding:11px 15px;
  font-size:13px;color:var(--text2);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;white-space:nowrap;
  transition:color .2s;
}
.tab.on{color:var(--red);border-bottom-color:var(--red);font-weight:700}

/* ===== BANNER / SWIPER ===== */
.swiper-wrap{position:relative;overflow:hidden}
.swiper-track{
  display:flex;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.swiper-track::-webkit-scrollbar{display:none}
.slide{
  flex-shrink:0;width:100%;scroll-snap-align:start;
  padding:20px 18px 24px;color:#fff;
  min-height:110px;position:relative;overflow:hidden;
}
.slide::before{
  content:'龙';
  position:absolute;right:-10px;top:-10px;
  font-family:'Noto Serif SC',serif;
  font-size:120px;font-weight:900;
  opacity:.08;color:#fff;line-height:1;pointer-events:none;
}
.slide h2{font-family:'Noto Serif SC',serif;font-size:19px;font-weight:700;line-height:1.4;margin-bottom:6px;position:relative}
.slide p{font-size:12px;opacity:.85;position:relative}
.slide-tag{
  display:inline-block;
  background:rgba(255,255,255,.2);
  font-size:10px;padding:2px 7px;border-radius:2px;
  margin-bottom:8px;letter-spacing:.5px;
}
.swiper-dots{
  display:flex;justify-content:center;gap:5px;
  padding:7px 0;background:var(--bg2);
}
.dot{width:5px;height:5px;border-radius:50%;background:#ddd;transition:all .3s}
.dot.on{background:var(--red);width:16px;border-radius:3px}

/* ===== QUICK ENTRY GRID ===== */
.quick-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  margin:10px 14px;border-radius:var(--radius);overflow:hidden;
}
.quick-item{
  background:var(--bg2);
  display:flex;flex-direction:column;align-items:center;
  padding:12px 4px;gap:5px;
}
.quick-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.quick-label{font-size:11px;color:var(--text2)}

/* ===== SECTION ===== */
.sec{margin-top:10px;background:var(--bg2)}
.sec-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px 8px;
}
.sec-title{
  font-family:'Noto Serif SC',serif;
  font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.sec-title::before{
  content:'';width:4px;height:18px;
  background:linear-gradient(to bottom,var(--gold),var(--red));
  border-radius:2px;display:block;
}
.sec-more{font-size:12px;color:var(--text3)}

/* ===== MATCH CARD ===== */
.match-list{padding:0 14px 10px}
.mc{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;overflow:hidden;
  transition:transform .15s;
}
.mc:active{transform:scale(.99)}
.mc-head{
  background:linear-gradient(90deg,#fff8f7,#fff);
  padding:7px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.mc-league{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--red);
}
.mc-league .lbadge{
  background:var(--red);color:#fff;
  font-size:10px;padding:1px 5px;border-radius:3px;
}
.mc-time{font-size:11px;color:var(--text3)}
.live-dot{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;color:#e74c3c;font-weight:600;
}
.live-dot::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#e74c3c;
  animation:blink 1.2s infinite;display:block;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

.mc-body{display:flex;align-items:center;padding:12px}
.mc-team{flex:1;text-align:center}
.mc-team-name{font-size:13px;font-weight:700;margin-top:4px;line-height:1.3}
.mc-team-logo{
  width:38px;height:38px;border-radius:50%;
  background:var(--bg);border:1px solid var(--border);
  margin:0 auto;display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.mc-mid{width:76px;text-align:center}
.mc-score{font-size:24px;font-weight:900;color:var(--red);letter-spacing:3px;font-family:'Noto Serif SC',serif}
.mc-vs{font-size:13px;color:#ccc;font-weight:700}
.mc-odds{display:flex;border-top:1px solid var(--border)}
.mc-odd{
  flex:1;text-align:center;padding:7px 0;
  border-right:1px solid var(--border);font-size:11px;color:var(--text3);
}
.mc-odd:last-child{border-right:none}
.mc-odd strong{display:block;font-size:14px;color:var(--red);font-weight:700;margin-bottom:2px}
.mc-odd.up strong{color:#e74c3c}
.mc-odd.down strong{color:#2980b9}

/* ===== EXPERT CARD ===== */
.expert-scroll{
  display:flex;gap:10px;overflow-x:auto;
  padding:0 14px 14px;scrollbar-width:none;
}
.expert-scroll::-webkit-scrollbar{display:none}
.ec{
  flex-shrink:0;width:86px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 6px;
  text-align:center;
}
.ec-avatar{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--gold-light);
  object-fit:cover;margin:0 auto 6px;
  background:var(--bg);
}
.ec-name{font-size:12px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ec-win{font-size:11px;color:var(--red);margin-top:2px}
.ec-streak{
  display:inline-block;font-size:10px;color:#fff;
  background:linear-gradient(90deg,var(--red),var(--gold));
  padding:1px 6px;border-radius:8px;margin-top:3px;
}

/* ===== PLAN CARD ===== */
.plan-list{padding:0 14px 10px}
.pc{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:12px;overflow:hidden;
}
.pc-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;background:#fffaf8;border-bottom:1px solid var(--border);
}
.pc-expert{display:flex;align-items:center;gap:9px}
.pc-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1.5px solid var(--gold-light)}
.pc-en{font-size:13px;font-weight:700}
.pc-et{font-size:11px;color:var(--text3)}
.pc-streak{font-size:11px;color:var(--red);font-weight:700}
.pc-body{padding:11px 12px}
.pc-match{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.pc-ltag{
  font-size:11px;color:var(--red);background:#fff0ef;
  padding:2px 7px;border-radius:12px;border:1px solid #fdd;
}
.pc-mt{font-size:12px;color:var(--text2);margin-left:7px}
.pc-mtime{font-size:11px;color:var(--text3)}
.pc-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.pc-pred{
  font-size:13px;font-weight:700;color:#fff;
  padding:3px 13px;border-radius:5px;
  letter-spacing:.5px;
}
.pc-stars{color:var(--gold);font-size:12px;letter-spacing:-1px}
.pc-type{font-size:11px;color:var(--text3);background:var(--bg);padding:2px 7px;border-radius:3px}
.pc-hit{font-size:11px;color:#27ae60;background:#eafaf1;padding:2px 8px;border-radius:3px;font-weight:600}
.pc-miss{font-size:11px;color:#e74c3c;background:#fdf0f0;padding:2px 8px;border-radius:3px}
.pc-text{
  font-size:12px;color:var(--text2);line-height:1.8;
  background:var(--bg);border-radius:6px;padding:9px;
  margin-bottom:9px;border-left:3px solid var(--red);
}
.pc-ft{display:flex;align-items:center;justify-content:space-between}
.pc-views{font-size:11px;color:var(--text3)}
.btn-free{
  font-size:12px;color:var(--red);
  border:1px solid var(--red);padding:4px 14px;border-radius:14px;
}
.btn-paid{
  font-size:12px;color:#fff;
  background:linear-gradient(90deg,var(--red),#e03048);
  padding:4px 14px;border-radius:14px;
}

/* ===== ARTICLE LIST ===== */
.art-list{padding:0 14px 10px}
.artc{
  display:flex;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--border);
}
.artc:last-child{border-bottom:none}
.artc-img{
  width:92px;height:62px;border-radius:7px;
  object-fit:cover;flex-shrink:0;background:var(--bg);
}
.artc-body{flex:1;overflow:hidden}
.artc-cat{
  font-size:10px;color:var(--red);background:#fff0ef;
  padding:1px 6px;border-radius:3px;
  display:inline-block;margin-bottom:4px;
  border:1px solid #fdd;
}
.artc-title{
  font-size:13px;font-weight:600;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.artc-meta{font-size:11px;color:var(--text3);margin-top:5px;display:flex;gap:10px}

/* ===== LIVE PAGE ===== */
.live-list{padding:0 14px 10px}
.lvc{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;overflow:hidden;
}
.lvc-banner{
  padding:14px;
  display:flex;align-items:center;justify-content:space-between;
  color:#fff;
}
.lvc-title{font-size:15px;font-weight:700;margin-bottom:3px}
.lvc-sub{font-size:11px;opacity:.85}
.lvc-btn{
  font-size:12px;color:var(--red);background:#fff;
  padding:5px 14px;border-radius:14px;white-space:nowrap;font-weight:700;
}
.lvc-stats{
  display:flex;border-top:1px solid var(--border);
}
.lvc-stat{
  flex:1;text-align:center;padding:8px 0;
  border-right:1px solid var(--border);font-size:11px;color:var(--text3);
}
.lvc-stat:last-child{border-right:none}
.lvc-stat strong{display:block;font-size:14px;color:var(--text);font-weight:700;margin-bottom:2px}

/* ===== DATA PAGE ===== */
.data-tabs{
  display:flex;gap:8px;padding:10px 14px 0;overflow-x:auto;scrollbar-width:none;
}
.data-tabs::-webkit-scrollbar{display:none}
.dtab{
  flex-shrink:0;font-size:12px;padding:5px 14px;
  border-radius:14px;border:1px solid var(--border);
  color:var(--text2);background:var(--bg2);
}
.dtab.on{background:var(--red);color:#fff;border-color:var(--red)}
.stand-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px}
.stand-table th{
  background:var(--red);color:#fff;
  padding:8px 5px;text-align:center;font-weight:500;
}
.stand-table td{
  padding:8px 5px;text-align:center;
  border-bottom:1px solid var(--border);color:var(--text2);
}
.stand-table tr:nth-child(even) td{background:#fafafa}
.stand-table .rank1{color:var(--red);font-weight:700}
.stand-table .rank2{color:var(--gold);font-weight:700}
.rank-badge{
  display:inline-block;width:18px;height:18px;border-radius:50%;
  background:var(--bg);font-size:10px;font-weight:700;
  line-height:18px;text-align:center;
}
.rank-badge.r1{background:var(--red);color:#fff}
.rank-badge.r2{background:var(--gold);color:#fff}
.rank-badge.r3{background:#cd7f32;color:#fff}

/* ===== BOTTOM NAV ===== */
.bnav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border);
  display:flex;z-index:200;
  padding-bottom:env(safe-area-inset-bottom);
}
.bni{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:6px 0 4px;gap:2px;color:var(--text3);font-size:10px;
}
.bni.on{color:var(--red)}
.bni-icon{font-size:22px}

/* ===== BADGE ===== */
.badge-new{
  display:inline-block;font-size:9px;color:#fff;
  background:var(--red);padding:1px 4px;border-radius:3px;
  margin-left:3px;vertical-align:middle;
}

/* ===== PAGE VISIBILITY ===== */
.page{display:none}
.page.on{display:block}

/* ===== GOLD DIVIDER ===== */
.gold-divider{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 14px;
}

/* ===== NOTICE BAR ===== */
.notice-bar{
  background:#fff8e1;border-bottom:1px solid #ffe082;
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;font-size:12px;color:#b8860b;overflow:hidden;
}
.notice-bar .nb-icon{flex-shrink:0;font-size:14px}
.nb-scroll{overflow:hidden;white-space:nowrap}
.nb-inner{display:inline-block;animation:marquee 20s linear infinite}
@keyframes marquee{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* ===== SCORE LIVE ===== */
.score-live{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border-radius:var(--radius);margin:0 14px 10px;
  padding:14px;color:#fff;overflow:hidden;position:relative;
}
.score-live::after{
  content:'';position:absolute;
  top:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;
  background:rgba(192,24,42,.2);
}
.sl-league{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.sl-match{display:flex;align-items:center;justify-content:space-between}
.sl-team{text-align:center;flex:1}
.sl-tname{font-size:13px;font-weight:700}
.sl-score-wrap{text-align:center;position:relative;z-index:1}
.sl-score{font-size:32px;font-weight:900;font-family:'Noto Serif SC',serif;letter-spacing:4px}
.sl-min{font-size:11px;color:var(--gold);margin-top:2px}
.sl-events{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.sl-ev{font-size:10px;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:3px}

/* ===== GRADIENT BACKGROUNDS ===== */
.bg-red{background:linear-gradient(135deg,var(--red-dark),var(--red))}
.bg-gold{background:linear-gradient(135deg,#b8860b,var(--gold))}
.bg-blue{background:linear-gradient(135deg,#1565c0,#1e88e5)}
.bg-green{background:linear-gradient(135deg,#2e7d32,#43a047)}
.bg-purple{background:linear-gradient(135deg,#6a1b9a,#ab47bc)}
.bg-dark{background:linear-gradient(135deg,#212121,#424242)}