:root{--bg:#0b0b0b;--text:#ffffff;--muted:#cfcfcf;--accent:#ff5349}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial}
.header{position:sticky;top:0;background:rgba(0,0,0,.9);border-bottom:1px solid #111;z-index:1000}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px;position:relative}
.nav .right{display:flex;gap:16px;flex-wrap:wrap}
.nav .right a{padding:6px 10px;border-radius:8px}
.nav a{color:var(--text);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--muted)}
.brand{display:flex;gap:8px;align-items:center}
.brand .title{font-weight:900;font-size:20px}
.back-btn{display:none;width:34px;height:34px;border:1px solid #333;border-radius:8px;background:transparent;color:#fff;align-items:center;justify-content:center;text-decoration:none;position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:1101}
.hamburger{display:none;width:34px;height:34px;border:1px solid #333;border-radius:8px;background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer;position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:1101}
.hamburger span{display:block;width:18px;height:2px;background:#fff;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.drawer{position:fixed;inset:0;display:none;z-index:2000}
.drawer[data-open="true"]{display:block}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.drawer-panel{position:absolute;left:0;top:0;width:76vw;max-width:320px;height:100vh;background:#0e0e0e;border-right:1px solid #222;display:flex;flex-direction:column;padding:16px;gap:12px}
.drawer-panel a{color:#fff;text-decoration:none;padding:10px;border-radius:8px}
.drawer-close{position:absolute;right:8px;top:8px;background:transparent;border:none;color:#fff;font-size:18px}
.container{max-width:1200px;margin:0 auto;padding:24px 16px}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.banner{margin:0}
.banner .carousel{position:relative;border-radius:12px;overflow:hidden;height:420px;background:#111;width:100%;max-width:1200px;margin:0 auto;}
.banner .carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .carousel .caption{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(0,0,0,.35);padding:12px;border-radius:8px;color:var(--text);opacity:0;transition:opacity .25s ease}
.banner-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;align-items:center;background:rgba(0,0,0,.28);padding:14px 16px;border-radius:10px;color:var(--text);text-align:center}
.banner-cta .banner-cta-title{font-weight:900;font-size:20px}
.banner-cta .banner-cta-desc{color:var(--muted)}
.carousel{position:relative;border-radius:12px;overflow:hidden;height:420px;background:#111}
.carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel .caption{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(0,0,0,.35);padding:12px;border-radius:8px}
.carousel .caption h3{margin:0 0 6px}
.carousel .dots{position:absolute;left:16px;bottom:16px;display:flex;gap:6px}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.3)}
.dot.active{background:#fff}
.sidebar-card{border:1px solid #222;border-radius:12px;padding:12px}
.grid{display:grid;gap:16px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-6{grid-template-columns:repeat(6,1fr)}
.card{display:block;border:1px solid #222;border-radius:12px;overflow:hidden;background:#111}
.card{text-decoration:none}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card .content{padding:10px}
.card .title{font-weight:800;color:#fff;transition:color .2s ease}
.card:hover .title,.card:active .title{color:rgba(255,255,255,.75)}
.card .title{color:#fff}
.section-title{font-size:22px;margin:24px 0 12px}
.search{display:flex;gap:8px;margin:12px 0}
input[type=text]{flex:1;padding:10px;border-radius:8px;border:1px solid #333;background:#0e0e0e;color:var(--text)}
.button{background:#fff;color:#000;border:none;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer}
.button.outline{background:transparent;color:var(--text);border:1px solid #333}
.more-bar{display:flex;justify-content:center;margin-top:16px}
#loadMore{padding:12px 28px;min-width:260px;font-size:16px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{padding:6px 10px;border:1px solid #333;border-radius:999px;font-size:12px;color:var(--muted)}
.tag.special{background:rgba(255,255,255,0.08);color:var(--text);border-color:#555;font-weight:800}
.tag.special:hover{background:rgba(255,255,255,0.14);color:var(--text);border-color:#666}
.footer{border-top:1px solid #111;margin-top:32px}
.footer .inner{max-width:1200px;margin:0 auto;padding:24px 16px;color:var(--muted)}
.article{max-width:980px;margin:0 auto}
.article img.hero{display:none}
.article figure{margin:20px 0}
.article figure img{width:100%;height:auto;border-radius:8px}
.article figure figcaption{margin-top:8px;color:var(--muted);text-align:center;font-size:14px}
.meta{display:flex;gap:12px;color:var(--muted);margin:8px 0}
.list-item{display:grid;grid-template-columns:200px 1fr;gap:16px;border-bottom:1px solid #222;padding:12px 0;text-decoration:none}
.list-item img{width:200px;height:120px;object-fit:cover;border-radius:8px}
.list-item .title{font-weight:800;color:#fff;transition:color .2s ease}
.list-item .meta{color:var(--muted);transition:color .2s ease}
.list-item > div{display:flex;flex-direction:column}
.list-item .date{margin-top:auto}
.list-item:hover .title,.list-item:active .title{color:rgba(255,255,255,.75)}
.list-item:hover .meta,.list-item:active .meta{color:rgba(255,255,255,.65)}
.empty{color:var(--muted)}
@media(max-width:900px){.nav{flex-direction:column;gap:10px;align-items:flex-start;justify-content:flex-start}.brand{position:relative;flex:1;justify-content:center;width:100%}.hero{grid-template-columns:1fr}.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-6{grid-template-columns:repeat(3,1fr)}.list-item{grid-template-columns:1fr}}
.top-views{margin:16px 0}
@media(max-width:900px){
  .top-views-grid{grid-template-columns:1fr}
  .lv-grid{grid-template-columns:1fr}
  .lv-item{display:grid;grid-template-columns:120px 1fr;align-items:center}
  .lv-item img{width:120px;height:80px}
  .lv-title{padding:0 10px;margin-top:0}
  .tv-feature{display:grid;grid-template-columns:120px 1fr;align-items:center}
  .tv-feature .feature-img{width:120px;height:80px}
  .tv-feature .feature-title{padding:0 10px}
  .rv-list{grid-template-columns:1fr}
  .rv-item{grid-template-columns:120px 1fr}
  .rv-item img{width:120px;height:80px}
}
@media(max-width:900px){
  .list-item img{margin:0 auto;display:block}
  .list-item .date{align-self:flex-end;text-align:right}
}
.nav .right{display:flex}
@media(max-width:900px){.nav .right{display:none}.hamburger{display:flex}.back-btn{display:flex}}
.top-views{margin:16px 0}
.top-views-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;align-items:start}
.desktop-only{display:block}
.mobile-only{display:none}
.tv-feature{display:block;border:1px solid #222;border-radius:12px;overflow:hidden;background:#111;text-decoration:none}
.tv-feature .feature-img{width:100%;height:280px;object-fit:cover;display:block}
.tv-feature .feature-title{padding:10px;font-weight:800;color:#fff;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;max-height:calc(1.4em * 3)}
.lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lv-item{display:block;border:1px solid #222;border-radius:12px;overflow:hidden;background:#111;text-decoration:none}
.lv-item img{width:100%;height:120px;object-fit:cover;display:block}
.lv-title{padding:12px 14px 14px;color:#fff;font-weight:700;font-size:14px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(1.6em * 2 + 12px);word-break:break-word;margin-top:-3px}
.rv-list{display:grid;gap:12px}
.rv-item{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start;border:1px solid #222;border-radius:12px;overflow:hidden;background:#111;text-decoration:none;padding:8px}
.rv-item img{width:120px;height:80px;object-fit:cover;border-radius:8px}
.rv-title{color:#fff;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;text-overflow:ellipsis;max-height:calc(1.4em * 4)}
.desktop-only{display:block}
.mobile-only{display:none}
@media(max-width:900px){.desktop-only{display:none}.mobile-only{display:grid}}
.video-modal{position:fixed;inset:0;display:block}
.video-modal[hidden]{display:none}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.video-modal-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90%;max-width:560px;background:#0e0e0e;border:1px solid #222;border-radius:12px;overflow:hidden}
.video-close{position:absolute;right:10px;top:10px;background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer}