:root{--bg:#070b14;--bg2:#0d1424;--panel:rgba(13,20,36,.82);--panel-2:rgba(18,26,46,.9);--line:rgba(255,255,255,.08);--text:#e8edf7;--muted:#9ba8c7;--accent:#7c5cff;--accent-2:#2ec5ff;--good:#42d392;--warn:#ffce5c;--shadow:0 18px 50px rgba(0,0,0,.35);--radius:24px;--radius-sm:16px}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:radial-gradient(circle at top left, rgba(124,92,255,.22), transparent 34%),radial-gradient(circle at top right, rgba(46,197,255,.16), transparent 28%),linear-gradient(180deg, #050812 0%, #080d18 30%, #060910 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select{font:inherit}
.container{width:min(1240px, calc(100% - 32px));margin:0 auto}.shell{padding:20px 0 60px}.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(5,8,18,.6);border-bottom:1px solid rgba(255,255,255,.06)}.topbar-inner{display:flex;align-items:center;gap:18px;padding:14px 0}.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}.logo-badge{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 10px 30px rgba(124,92,255,.35)}.logo span{font-size:18px}.nav{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}.nav a{padding:10px 14px;border:1px solid transparent;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.03)}.nav a:hover,.nav a.active{color:var(--text);border-color:rgba(124,92,255,.35);background:rgba(124,92,255,.12)}.mobile-nav{display:none;margin-left:auto}.hero{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:32px;background:linear-gradient(135deg, rgba(124,92,255,.22), rgba(46,197,255,.08)),radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 30%),rgba(9,14,25,.92);box-shadow:var(--shadow);margin-top:22px}.hero-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:22px;padding:26px}.hero-main{min-height:450px;display:grid;grid-template-rows:1fr auto;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.06))}.hero-stage{position:relative;min-height:360px;border-radius:28px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end}.hero-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,10,18,.14) 0%, rgba(6,10,18,.62) 55%, rgba(6,10,18,.95) 100%)}.hero-stage .copy{position:relative;z-index:1;padding:34px;max-width:760px}.kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.hero-title{font-size:clamp(30px, 4vw, 56px);line-height:1.05;margin:16px 0 12px;font-weight:900}.hero-desc{color:rgba(235,240,255,.88);font-size:15px;line-height:1.8;max-width:62ch}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff}.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-color:transparent;box-shadow:0 12px 26px rgba(124,92,255,.28)}.btn:hover{transform:translateY(-1px)}.hero-side{display:flex;flex-direction:column;gap:14px}.searchbar,.filterbar{display:flex;gap:10px;flex-wrap:wrap}.searchbar input,.filterbar input,.filterbar select{flex:1;min-width:180px;padding:13px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(7,10,18,.74);color:var(--text);outline:none}.section{margin-top:24px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 14px}.section-title{font-size:24px;margin:0}.section-sub{margin:6px 0 0;color:var(--muted);font-size:14px}.grid{display:grid;gap:16px}.cards{grid-template-columns:repeat(6,minmax(0,1fr))}.cards.compact{grid-template-columns:repeat(8,minmax(0,1fr))}.cards.large{grid-template-columns:repeat(4,minmax(0,1fr))}.card{display:block;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.06));box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.42);box-shadow:0 18px 30px rgba(0,0,0,.28)}.poster{position:relative;background-color:#111827;background-size:cover;background-position:center;overflow:hidden}.poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, rgba(3,6,12,.9) 100%)}.poster .meta{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;justify-content:space-between;gap:8px;align-items:end}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:12px}.card-body{padding:13px 13px 16px}.card h3,.card h4{margin:0 0 7px;font-size:15px;line-height:1.45}.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}.tag{font-size:12px;padding:6px 10px;border-radius:999px;color:#dbe5ff;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.2)}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.panel{border:1px solid rgba(255,255,255,.08);background:rgba(10,14,24,.84);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.panel-inner{padding:20px}.rank-list{display:grid;gap:12px}.rank-item{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;padding:12px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.rank-num{font-size:30px;font-weight:900;color:rgba(255,255,255,.16);text-align:center}.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px}.breadcrumb a{color:#dfe7ff}.detail-top{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}.detail-poster{border-radius:28px;overflow:hidden;min-height:540px;border:1px solid rgba(255,255,255,.08);background-size:cover;background-position:center;position:relative}.detail-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,6,12,.16) 0%, rgba(3,6,12,.75) 100%)}.detail-poster .stack{position:absolute;inset:auto 18px 18px 18px;z-index:1;display:grid;gap:10px}.detail-title{font-size:clamp(28px, 3vw, 48px);margin:0 0 10px;line-height:1.08}.detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}.detail-meta .badge{background:rgba(255,255,255,.07)}.player-wrap{margin-top:20px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#000;box-shadow:var(--shadow)}.player-head{padding:14px 16px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.video{width:100%;aspect-ratio:16 / 9;background:#000}video{width:100%;height:100%;display:block;background:#000}.content-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:20px}.article{border:1px solid rgba(255,255,255,.08);background:rgba(10,14,24,.78);border-radius:28px;padding:22px}.article h2{margin-top:0}.article p{line-height:1.9;color:#d9e2f4}.sticky-box{position:sticky;top:90px}.footer{margin-top:26px;color:var(--muted);padding:26px 0 10px;border-top:1px solid rgba(255,255,255,.06)}.muted{color:var(--muted)}.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.kv div{padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.kv b{display:block;margin-bottom:6px}.empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.12);border-radius:20px}.hero-slider{display:grid;grid-template-columns:1fr 240px;gap:16px}.hero-slides{position:relative;min-height:420px;overflow:hidden;border-radius:26px}.slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;background-size:cover;background-position:center;display:flex;align-items:end}.slide.active{opacity:1;pointer-events:auto}.slide .copy{position:relative;z-index:1;padding:28px;max-width:700px}.slide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,6,12,.08), rgba(3,6,12,.7) 62%, rgba(3,6,12,.96))}.hero-thumbs{display:grid;gap:12px}.hero-thumb{cursor:pointer;display:grid;grid-template-columns:68px 1fr;gap:10px;align-items:center;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}.hero-thumb.active{border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.12)}.hero-thumb .thumb{width:68px;height:48px;border-radius:14px;background-size:cover;background-position:center}.hero-thumb b{display:block;font-size:13px;margin-bottom:4px}.hero-thumb span{font-size:12px;color:var(--muted)}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.toolbar .pill{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
@media (max-width: 1200px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.cards.compact{grid-template-columns:repeat(6,minmax(0,1fr))}.split,.content-grid,.detail-top,.hero-grid,.hero-slider{grid-template-columns:1fr}.sticky-box{position:static}}
@media (max-width: 760px){.container{width:min(100% - 20px, 1240px)}.nav{display:none}.mobile-nav{display:flex}.hero{border-radius:24px}.hero-main,.hero-slides{min-height:320px}.hero-stage{min-height:300px}.cards,.cards.compact,.cards.large{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-poster{min-height:420px}.kv{grid-template-columns:1fr}.topbar-inner{gap:10px}}