/* 开云体育下载 lvhaoy.com — 深紫·青绿 社区论坛风格 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:        #0f0a1e;
  --ink2:       #1a1035;
  --ink3:       #231546;
  --indigo:     #4f46e5;
  --indigo-d:   #4338ca;
  --indigo-dd:  #3730a3;
  --indigo-l:   #6366f1;
  --indigo-ll:  #818cf8;
  --indigo-pale:#eef2ff;
  --indigo-ghost:#f5f3ff;
  --teal:       #0d9488;
  --teal-l:     #14b8a6;
  --teal-ll:    #2dd4bf;
  --teal-pale:  #ccfbf1;
  --teal-ghost: #f0fdfa;
  --purple:     #7c3aed;
  --purple-l:   #8b5cf6;
  --white:      #ffffff;
  --bg:         #f9f8ff;
  --dark:       #0f172a;
  --slate:      #334155;
  --gray:       #64748b;
  --gray-l:     #94a3b8;
  --gray-ll:    #cbd5e1;
  --border:     #e0e7ff;
  --border-l:   #eef2ff;
  --gold:       #f59e0b;
  --red:        #ef4444;
  --green:      #22c55e;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --shadow:     0 4px 20px rgba(79,70,229,.1);
  --shadow-lg:  0 12px 40px rgba(79,70,229,.16);
  --glow:       0 0 30px rgba(79,70,229,.35);
}
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}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px}

/* ── Topbar ── */
.topbar{background:var(--ink);height:36px;display:flex;align-items:center}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between}
.topbar-left{display:flex;align-items:center;gap:1.25rem}
.topbar-live{display:inline-flex;align-items:center;gap:.35rem;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;padding:.1rem .5rem;border-radius:3px;animation:tp-blink 2s infinite}
@keyframes tp-blink{0%,100%{opacity:1}50%{opacity:.6}}
.topbar-text{color:rgba(255,255,255,.55);font-size:.75rem}
.topbar-text span{color:var(--teal-ll);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-right a{color:rgba(255,255,255,.5);font-size:.75rem;transition:.15s}
.topbar-right a:hover{color:var(--teal-ll)}
.topbar-dl{background:var(--teal);color:#fff !important;font-size:.7rem !important;font-weight:700;padding:.15rem .65rem;border-radius:10px}
.topbar-dl:hover{background:var(--teal-l) !important}

/* ── Navbar ── */
.navbar{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(79,70,229,.08)}
.navbar .wrap{display:flex;align-items:center;gap:1.25rem;height:62px}
.nav-links{display:flex;align-items:center;margin-left:auto}
.nav-link{font-size:.87rem;font-weight:600;color:var(--slate);padding:.5rem .8rem;position:relative;transition:.2s}
.nav-link::after{content:'';position:absolute;bottom:0;left:.8rem;right:.8rem;height:2px;border-radius:1px;background:var(--indigo);transform:scaleX(0);transition:.2s}
.nav-link:hover{color:var(--indigo)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--indigo)}
.nav-notify{position:relative}
.nav-notify-dot{position:absolute;top:6px;right:4px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid #fff}
.nav-dl-btn{margin-left:.5rem;background:linear-gradient(135deg,var(--indigo),var(--purple));color:#fff;font-size:.85rem;font-weight:700;padding:.42rem 1.1rem;border-radius:20px;box-shadow:0 4px 14px rgba(79,70,229,.3);transition:.2s}
.nav-dl-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,70,229,.4)}
.nav-toggle{display:none;background:none;border:1.5px solid var(--border);border-radius:8px;padding:.3rem .5rem;font-size:1rem;cursor:pointer;color:var(--indigo)}
.nav-links.open{display:flex;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:var(--white);border-bottom:2px solid var(--border);padding:1rem;z-index:99;align-items:flex-start}

/* ── Hero ── */
.hero{background:linear-gradient(145deg,var(--ink) 0%,var(--ink2) 45%,var(--ink3) 100%);padding:3.5rem 0 3rem;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;top:-120px;right:-120px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.2) 0%,transparent 70%)}
.hero::after{content:'';position:absolute;bottom:-80px;left:10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.12) 0%,transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1fr 440px;gap:2.5rem;align-items:center;position:relative;z-index:1}
/* Left */
.hero-chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.35);color:var(--indigo-ll);font-size:.72rem;font-weight:700;padding:.28rem .85rem;border-radius:20px;margin-bottom:1rem;letter-spacing:.04em}
.hero-h1{font-size:2.8rem;font-weight:900;line-height:1.15;margin-bottom:.85rem;background:linear-gradient(135deg,#fff 40%,var(--indigo-ll));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-h1-teal{background:linear-gradient(135deg,var(--teal-ll),var(--teal-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{color:rgba(255,255,255,.55);font-size:.95rem;line-height:1.75;margin-bottom:1.75rem;max-width:480px}
/* Download button group */
.hero-dl-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem}
.hero-dl-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.65rem 1.35rem;border-radius:12px;font-size:.88rem;font-weight:700;transition:.2s}
.hdb-main{background:linear-gradient(135deg,var(--indigo),var(--purple));color:#fff;box-shadow:var(--glow)}
.hdb-teal{background:linear-gradient(135deg,var(--teal),var(--teal-l));color:#fff;box-shadow:0 0 24px rgba(13,148,136,.3)}
.hdb-ghost{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2)}
.hero-dl-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
/* Trust pills */
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem}
.trust-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:rgba(255,255,255,.45)}
.trust-pill::before{content:'✓';color:var(--teal-ll);font-weight:800}
/* Right: community preview cards */
.hero-right{display:flex;flex-direction:column;gap:.75rem}
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:1rem 1.1rem;backdrop-filter:blur(8px);transition:.2s}
.hero-card:hover{background:rgba(255,255,255,.11);border-color:rgba(99,102,241,.4)}
.hc-type{font-size:.62rem;font-weight:800;padding:.1rem .45rem;border-radius:8px;margin-bottom:.4rem;display:inline-block}
.hct-live{background:var(--red);color:#fff}
.hct-hot{background:var(--gold);color:#fff}
.hct-new{background:var(--teal);color:#fff}
.hct-rec{background:var(--indigo);color:#fff}
.hc-title{font-size:.88rem;font-weight:700;color:#fff;line-height:1.4;margin-bottom:.35rem}
.hc-meta{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.4)}
.hc-stats{display:flex;gap:.75rem}

/* ── Main Layout ── */
.main-area{padding:2rem 0}
.main-grid{display:grid;grid-template-columns:1fr 330px;gap:1.75rem;align-items:start}

/* ── Section Header ── */
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.sec-hd-left{display:flex;align-items:center;gap:.65rem}
.sec-hd-bar{width:4px;height:22px;border-radius:2px;background:linear-gradient(180deg,var(--indigo),var(--purple))}
.sec-hd-bar-teal{background:linear-gradient(180deg,var(--teal),var(--teal-l))}
.sec-hd-title{font-size:1.05rem;font-weight:900;color:var(--dark)}
.sec-hd-more{font-size:.78rem;color:var(--indigo);font-weight:600;border:1px solid var(--border);padding:.2rem .65rem;border-radius:16px;transition:.2s}
.sec-hd-more:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* ── Tabs (underline style) ── */
.tab-underline{display:flex;gap:0;border-bottom:2px solid var(--border-l);margin-bottom:1.25rem}
.tab-ul-btn{font-size:.85rem;font-weight:700;color:var(--gray);padding:.5rem 1.1rem;cursor:pointer;border:none;background:none;position:relative;transition:.2s}
.tab-ul-btn::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--indigo);transform:scaleX(0);transition:.25s;border-radius:1px}
.tab-ul-btn.active{color:var(--indigo)}
.tab-ul-btn.active::after{transform:scaleX(1)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ── Spotlight Article ── */
.spotlight{background:var(--white);border:1px solid var(--border-l);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.5rem;box-shadow:var(--shadow);display:grid;grid-template-columns:7px 1fr}
.spotlight-accent{background:linear-gradient(180deg,var(--indigo),var(--purple))}
.spotlight-body{padding:1.4rem 1.4rem 1.25rem}
.sp-cat{font-size:.68rem;font-weight:800;color:var(--indigo);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.sp-title{font-size:1.15rem;font-weight:900;color:var(--dark);line-height:1.35;margin-bottom:.6rem}
.sp-excerpt{font-size:.84rem;color:var(--gray);line-height:1.65;margin-bottom:.85rem}
.sp-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;color:var(--gray-l)}
.sp-badge{background:var(--indigo-pale);color:var(--indigo-d);font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:8px}

/* ── News List ── */
.news-list{display:flex;flex-direction:column;gap:.75rem}
.news-row{background:var(--white);border:1px solid var(--border-l);border-radius:var(--radius);padding:.85rem 1rem;display:grid;grid-template-columns:56px 1fr;gap:.85rem;align-items:center;box-shadow:var(--shadow);transition:.2s}
.news-row:hover{border-color:var(--border);transform:translateX(3px);box-shadow:var(--shadow-lg)}
.news-row-thumb{width:56px;height:56px;border-radius:var(--radius);background:linear-gradient(135deg,var(--indigo-pale),var(--teal-pale));display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.news-row-body{}
.news-row-tags{display:flex;gap:.3rem;margin-bottom:.2rem}
.nr-tag{font-size:.62rem;font-weight:700;padding:.06rem .38rem;border-radius:6px}
.tag-i{background:var(--indigo-pale);color:var(--indigo-d)}
.tag-t{background:var(--teal-pale);color:var(--teal)}
.tag-hot{background:#fef3c7;color:#92400e}
.tag-wc{background:#ede9fe;color:var(--purple)}
.news-row-title{font-size:.88rem;font-weight:700;color:var(--dark);line-height:1.4;margin-bottom:.2rem}
.news-row-meta{font-size:.7rem;color:var(--gray-l);display:flex;gap:.65rem}

/* ── Recommendation Cards ── */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:1.5rem}
.rec-card{background:var(--white);border:1px solid var(--border-l);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.rec-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rc-head{background:linear-gradient(90deg,var(--indigo-dd),var(--indigo));padding:.6rem 1rem;display:flex;justify-content:space-between;align-items:center}
.rc-head-hot{background:linear-gradient(90deg,var(--purple),var(--indigo-l))}
.rc-league{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.04em}
.rc-badge{font-size:.62rem;font-weight:800;padding:.12rem .42rem;border-radius:8px}
.rc-vip{background:var(--gold);color:#fff}
.rc-free{background:rgba(255,255,255,.2);color:#fff}
.rc-body{padding:1rem}
.rc-teams{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem;font-size:.88rem;font-weight:800;color:var(--dark)}
.rc-vs{font-size:.7rem;color:var(--gray-l);font-weight:400}
.rc-date{font-size:.7rem;color:var(--gray-l);margin-bottom:.75rem}
/* Gauge (prediction percentage) */
.gauge-wrap{display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem}
.gauge{width:46px;height:46px;flex-shrink:0;position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:var(--border-l);stroke-width:4}
.gauge-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s}
.gauge-fill-i{stroke:var(--indigo-l)}
.gauge-fill-t{stroke:var(--teal-l)}
.gauge-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.6rem;font-weight:900;color:var(--dark)}
.gauge-info{}
.gauge-rec{font-size:.92rem;font-weight:900;color:var(--indigo)}
.gauge-conf{font-size:.72rem;color:var(--gold)}
.rc-note{font-size:.75rem;color:var(--gray);line-height:1.55;border-top:1px solid var(--border-l);padding-top:.6rem}

/* ── Live Section ── */
.live-section{background:linear-gradient(135deg,var(--ink),var(--ink2));border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem}
.live-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.live-hd-title{color:#fff;font-size:1rem;font-weight:900;display:flex;align-items:center;gap:.5rem}
.live-badge-pulse{background:var(--red);color:#fff;font-size:.62rem;font-weight:800;padding:.1rem .4rem;border-radius:3px;animation:tp-blink 1.5s infinite}
.live-more{font-size:.78rem;color:var(--teal-ll);font-weight:600}
.live-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
.lc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:.85rem 1rem;transition:.2s}
.lc:hover{background:rgba(255,255,255,.11);border-color:rgba(99,102,241,.3)}
.lc-league{font-size:.68rem;color:rgba(255,255,255,.45);margin-bottom:.3rem}
.lc-match{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:.25rem}
.lc-score{font-size:1.3rem;font-weight:900;color:var(--teal-ll)}
.lc-detail{font-size:.68rem;color:rgba(255,255,255,.4);margin-top:.2rem}
.lc-platform{font-size:.68rem;color:var(--indigo-ll);font-weight:600;margin-top:.4rem}
.lc-watching{display:flex;align-items:center;gap:.25rem;font-size:.65rem;color:rgba(255,255,255,.35);margin-top:.25rem}
.lc-watching-dot{width:5px;height:5px;background:var(--green);border-radius:50%;animation:tp-blink 2s infinite}

/* ── Discussion Group ── */
.discuss-board{background:var(--white);border:1px solid var(--border-l);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.db-head-row{display:grid;grid-template-columns:1fr 60px 60px 90px;gap:.5rem;padding:.5rem 1rem;background:var(--indigo-ghost);border-bottom:1px solid var(--border);font-size:.7rem;font-weight:700;color:var(--gray)}
.thread-row{display:grid;grid-template-columns:1fr 60px 60px 90px;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border-l);align-items:center;transition:.15s;cursor:pointer}
.thread-row:last-child{border-bottom:none}
.thread-row:hover{background:var(--indigo-ghost)}
.thread-info{}
.thread-cats{display:flex;gap:.3rem;margin-bottom:.25rem;flex-wrap:wrap}
.tc{font-size:.6rem;font-weight:800;padding:.06rem .38rem;border-radius:6px}
.tc-pin{background:var(--red);color:#fff}
.tc-hot{background:var(--gold);color:#fff}
.tc-wc{background:var(--indigo);color:#fff}
.tc-new{background:var(--teal);color:#fff}
.tc-rec{background:var(--purple);color:#fff}
.tc-live{background:var(--red);color:#fff}
.thread-title{font-size:.85rem;font-weight:700;color:var(--dark);line-height:1.35;margin-bottom:.2rem}
.thread-auth{font-size:.7rem;color:var(--gray-l)}
.thread-stat{font-size:.78rem;font-weight:700;color:var(--slate);text-align:center}
.thread-time{font-size:.7rem;color:var(--gray-l)}
.thread-last{font-size:.68rem;color:var(--gray-l)}
.db-footer{padding:.65rem 1rem;background:var(--indigo-ghost);border-top:1px solid var(--border);text-align:center}
.db-footer a{font-size:.82rem;font-weight:700;color:var(--indigo)}

/* ── Sidebar ── */
.sw{background:var(--white);border:1px solid var(--border-l);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.sw-hd{padding:.65rem 1rem;font-size:.85rem;font-weight:800;color:var(--dark);display:flex;align-items:center;gap:.4rem;border-bottom:2px solid var(--border-l);background:var(--indigo-ghost)}
.sw-hd .sw-dot{width:8px;height:8px;border-radius:50%;background:var(--indigo);display:inline-block}
.sw-hd-teal .sw-dot{background:var(--teal)}
.sw-body{padding:.8rem 1rem}
/* Hot threads mini */
.mini-thread{padding:.45rem 0;border-bottom:1px solid var(--indigo-ghost);display:flex;align-items:flex-start;gap:.5rem}
.mini-thread:last-child{border-bottom:none}
.mt-rank{width:18px;height:18px;border-radius:4px;font-size:.65rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mt-r1{background:var(--indigo);color:#fff}
.mt-r2{background:var(--indigo-l);color:#fff}
.mt-r3{background:var(--indigo-ll);color:#fff}
.mt-rest{background:var(--border-l);color:var(--gray)}
.mt-title{font-size:.8rem;font-weight:600;color:var(--dark);line-height:1.35}
.mt-meta{font-size:.68rem;color:var(--gray-l)}
/* Download widget */
.dl-widget{background:linear-gradient(135deg,var(--ink2),var(--ink3));border-radius:var(--radius);padding:1.1rem;text-align:center;margin-bottom:.75rem}
.dlw-title{color:#fff;font-size:.95rem;font-weight:800;margin-bottom:.2rem}
.dlw-sub{color:rgba(255,255,255,.5);font-size:.75rem;margin-bottom:.85rem}
.dlw-btns{display:flex;flex-direction:column;gap:.4rem}
.dlw-btn{display:block;font-size:.8rem;font-weight:700;padding:.45rem;border-radius:8px;text-align:center;transition:.2s}
.dlw-android{background:linear-gradient(90deg,var(--teal),var(--teal-l));color:#fff}
.dlw-ios{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2)}
.dlw-btn:hover{filter:brightness(1.1)}
/* Live scores mini */
.mini-live{padding:.4rem 0;border-bottom:1px solid var(--indigo-ghost);display:flex;align-items:center;justify-content:space-between}
.mini-live:last-child{border-bottom:none}
.ml-teams{font-size:.8rem;font-weight:700;color:var(--dark)}
.ml-score{font-size:.85rem;font-weight:900;color:var(--indigo);padding:0 .4rem}
.ml-live-dot{width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0;animation:tp-blink 1.5s infinite}

/* ── Guide ── */
.guide-section{padding:2.5rem 0;background:var(--white);border-top:1px solid var(--border-l)}
.guide-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.65rem}
.guide-item{background:var(--bg);border:1px solid var(--border-l);border-radius:var(--radius);padding:.6rem .75rem;font-size:.78rem;font-weight:700;color:var(--indigo-dd);text-align:center;transition:.2s}
.guide-item:hover{background:var(--indigo);color:#fff;border-color:var(--indigo);box-shadow:0 4px 14px rgba(79,70,229,.25)}

/* ── Footer ── */
footer{background:var(--ink);color:rgba(255,255,255,.45);padding:2.5rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-brand-name{font-size:1.05rem;font-weight:900;color:var(--teal-ll);margin-bottom:.6rem}
.footer-brand p{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.38)}
.footer-col h4{font-size:.78rem;font-weight:800;color:var(--indigo-ll);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.75rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.4rem}
.footer-col a{font-size:.8rem;color:rgba(255,255,255,.38);transition:.15s}
.footer-col a:hover{color:var(--teal-ll)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.25rem;text-align:center;font-size:.75rem;color:rgba(255,255,255,.28);line-height:2}

/* ── Responsive ── */
@media(max-width:960px){
  .hero-grid,.main-grid{grid-template-columns:1fr}
  .rec-grid,.live-cards{grid-template-columns:1fr 1fr}
  .guide-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .db-head-row,.thread-row{grid-template-columns:1fr 50px 50px}
  .thread-time{display:none}
}
@media(max-width:600px){
  .hero-h1{font-size:1.9rem}
  .rec-grid,.live-cards{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .hero-dl-row{flex-direction:column;align-items:flex-start}
}