:root{
  --primary:#6c7bff;--primary-dark:#8b5cf6;
  --bg:#0f1023;--bg2:#1a1b3a;--line:rgba(255,255,255,.08);
  --text:#e8ebff;--muted:#9aa3c7;--card:rgba(255,255,255,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;
  background:var(--bg);background-image:radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.18),transparent),radial-gradient(900px 500px at 0% 0%,rgba(108,123,255,.15),transparent),linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;color:var(--text);line-height:1.6;display:flex;flex-direction:column;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}

/* 头部 */
.site-header{background:rgba(20,22,48,.65);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:24px;height:64px}
.logo{font-size:20px;font-weight:800;background:linear-gradient(135deg,#8ea2ff,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.nav{display:flex;gap:18px;flex:1;overflow:auto}
.nav a{font-size:14px;color:#cdd3f0;white-space:nowrap;transition:.2s}
.nav a:hover,.nav a.on{color:#fff;text-shadow:0 0 12px rgba(140,162,255,.8)}
.search{display:flex;gap:0}
.search input{border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px;padding:8px 12px;font-size:13px;width:160px;outline:none;background:rgba(255,255,255,.06);color:#fff}
.search input::placeholder{color:#8a93b8}
.search button{border:0;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:8px 14px;border-radius:0 8px 8px 0;cursor:pointer;font-size:13px}

main{flex:1 0 auto;padding:24px 0}
.flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash-success{background:rgba(31,157,85,.15);color:#5eeaa0;border:1px solid rgba(94,234,160,.3)}
.flash-error{background:rgba(231,76,60,.15);color:#ff8b80;border:1px solid rgba(255,139,128,.3)}

/* Hero 横幅 */
.hero{position:relative;height:340px;margin:0 -20px 24px;border-radius:0 0 18px 18px;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:heroSlide 14s ease-in-out infinite,kenburns 20s ease-in-out infinite}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,35,.1),rgba(15,16,35,.5))}
.hero-inner{position:relative;z-index:2;padding:20px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero-title{font-size:38px;font-weight:800;margin-bottom:10px;letter-spacing:2px;animation:fadeUp 1s ease}
.hero-sub{font-size:16px;opacity:.95;animation:fadeUp 1.2s ease}
@keyframes heroSlide{
  0%,42%{background-image:url('hero1.jpg')}
  50%,92%{background-image:url('hero2.jpg')}
  100%{background-image:url('hero1.jpg')}
}
@keyframes kenburns{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* 分类 tab */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 22px}
.cat-tabs a{padding:7px 16px;background:var(--card);border:1px solid var(--line);border-radius:999px;font-size:13px;color:#cdd3f0;backdrop-filter:blur(8px);transition:.2s}
.cat-tabs a.active,.cat-tabs a:hover{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(108,123,255,.4)}

.sec-title{font-size:20px;margin:8px 0 18px;font-weight:700}
.sec-title small{font-size:13px;color:var(--muted);font-weight:400;margin-left:8px}

/* 热门横滑 */
.hot-block{margin-bottom:10px}
.hot-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:rgba(108,123,255,.25) transparent}
.hot-scroll::-webkit-scrollbar{height:6px}
.hot-scroll::-webkit-scrollbar-track{background:transparent}
.hot-scroll::-webkit-scrollbar-thumb{background:rgba(108,123,255,.22);border-radius:3px}
.hot-scroll::-webkit-scrollbar-thumb:hover{background:rgba(108,123,255,.5)}
.hot-item{flex:0 0 150px;text-align:center}
.hot-item img{width:150px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line);transition:.2s}
.hot-item:hover img{transform:translateY(-3px);box-shadow:0 8px 20px rgba(108,123,255,.4);border-color:var(--primary)}
.hot-name{display:block;font-size:12px;color:#cdd3f0;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 卡片网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s;display:block;backdrop-filter:blur(10px)}
.card:hover{transform:translateY(-4px);border-color:rgba(108,123,255,.5);box-shadow:0 12px 32px rgba(108,123,255,.25),0 0 0 1px rgba(108,123,255,.2)}
.card-cover{aspect-ratio:16/10;background:#1e2044;overflow:hidden}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.card:hover .card-cover img{transform:scale(1.05)}
.card-body{padding:12px 14px}
.card-title{font-size:14px;line-height:1.45;height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:8px;color:#eef1ff}
.card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.badge{background:rgba(108,123,255,.18);color:#a8b4ff;font-size:12px;padding:2px 9px;border-radius:6px}
.stars{color:#f5a623;font-size:13px;letter-spacing:1px}
.card-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px}
.dl-btn{color:#8ea2ff}
.card-actions{display:flex;align-items:center;gap:10px}
.like-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);padding:4px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:.2s}
.like-btn:hover{border-color:#ff6b9d;color:#ff6b9d}
.like-btn.liked{background:rgba(255,107,157,.15);border-color:#ff6b9d;color:#ff6b9d}
.like-num{font-weight:600}

.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0;font-size:14px}

/* 分页 */
.pager{display:flex;gap:8px;justify-content:center;margin:30px 0;flex-wrap:wrap}
.pager a{padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:13px;color:#cdd3f0;transition:.2s}
.pager a:hover{border-color:var(--primary);color:#fff}
.pager a.on{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:transparent;color:#fff}
.pager .dots{color:var(--muted);padding:7px 4px}

/* 详情 */
.detail-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:22px;backdrop-filter:blur(10px)}
.detail-head{display:flex;gap:22px}
.detail-cover{width:150px;height:110px;border-radius:10px;object-fit:cover;background:#1e2044;flex-shrink:0}
.detail-title{font-size:22px;margin-bottom:10px}
.detail-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
.dot{color:var(--muted)}
.detail-date{color:var(--muted);font-size:12px;margin-top:10px}
.detail-section{margin-top:24px}
.detail-section h3{font-size:16px;margin-bottom:12px;padding-left:10px;border-left:3px solid var(--primary)}
.detail-desc{font-size:14px;color:#cdd3f0;white-space:normal}
.download-box{background:rgba(108,123,255,.08);border:1px solid var(--line);border-radius:12px;padding:20px}
.dl-line{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dl-line label{width:70px;font-size:13px;color:#aab2d8}
.dl-line input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:rgba(255,255,255,.06);color:#fff}
button.mini{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#cdd3f0;padding:9px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.big-btn{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:12px 34px;border-radius:10px;font-size:15px;margin-top:6px;box-shadow:0 6px 20px rgba(108,123,255,.4)}
.big-btn:hover{opacity:.92}

/* 开屏加载（电梯门效果） */
#preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.pre-half{position:absolute;left:0;width:100%;height:50%;background:radial-gradient(circle at 50% 50%,#1a1c3e,#0d0e24);transition:transform .9s cubic-bezier(.77,0,.18,1)}
.pre-top{top:0;border-bottom:1px solid rgba(108,123,255,.3)}
.pre-bottom{bottom:0;border-top:1px solid rgba(108,123,255,.3)}
#preloader.done .pre-top{transform:translateY(-100%)}
#preloader.done .pre-bottom{transform:translateY(100%)}
.pre-center{position:relative;z-index:2;text-align:center;transition:opacity .3s}
#preloader.done .pre-center{opacity:0}
.pre-ring{width:50px;height:50px;border:3px solid rgba(108,123,255,.2);border-top-color:#6c7bff;border-radius:50%;margin:0 auto 18px;animation:prespin 1s linear infinite}
.pre-logo{font-size:24px;font-weight:700;color:#fff;letter-spacing:3px;margin-bottom:8px;text-shadow:0 0 20px rgba(108,123,255,.6)}
.pre-text{font-size:13px;color:#8a93b8;letter-spacing:2px}
@keyframes prespin{to{transform:rotate(360deg)}}
/* 页脚 */
.site-footer{background:rgba(20,22,48,.6);border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px;text-align:center}
.disclaimer-title{font-size:14px;font-weight:700;color:#ff6b6b;margin-bottom:10px}
.disclaimer-text{font-size:12px;line-height:1.9;color:#ff8787;max-width:860px;margin:0 auto}

@media(max-width:768px){
  .header-inner{flex-wrap:wrap;height:auto;padding:12px 0;gap:10px}
  .search input{width:110px}
  .detail-head{flex-direction:column}
  .detail-cover{width:100%;height:160px}
  .hero{height:220px}
  .hero-title{font-size:24px}
  .hero-sub{font-size:13px}
}