/* =============================================================
   夸克资源站 - style.css
   移动端优先, 清爽 资源 站 风格
   ============================================================= */
:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1f2430; --muted:#6b7280; --line:#e5e7eb;
  --brand:#ff7a1a; --brand2:#ff5a2c; --blue:#2f6bff; --ok:#16a34a;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
  "Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; font-size:15px;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.muted{color:var(--muted); font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
code{background:#eef0f3; padding:2px 6px; border-radius:6px; font-size:13px}

/* ---------- header ---------- */
.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; box-shadow:var(--shadow)}
.header-inner{display:flex; align-items:center; gap:16px; padding-top:12px; padding-bottom:12px}
.logo{font-size:20px; font-weight:800; letter-spacing:.5px; color:var(--brand); white-space:nowrap}
.search{flex:1; display:flex; gap:8px; max-width:560px}
.search input{flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; background:#f7f8fa; outline:none}
.search input:focus{border-color:var(--brand); background:#fff}
.search button{border:0; background:var(--brand); color:#fff; border-radius:10px; padding:9px 18px; font-size:14px; cursor:pointer; font-weight:600}
.cats{background:#fff; border-bottom:1px solid var(--line)}
.cats-inner{display:flex; gap:4px; overflow-x:auto; padding-top:8px; padding-bottom:8px; scrollbar-width:none}
.cats-inner::-webkit-scrollbar{display:none}
.cat{padding:7px 14px; border-radius:999px; font-size:14px; color:#374151; white-space:nowrap; background:#f3f4f6}
.cat.active{background:var(--brand); color:#fff}
.cat:hover{background:#ffe9d6}
.cat.active:hover{background:var(--brand)}

/* ---------- hero ---------- */
.hero{margin:16px auto; padding:22px 20px; background:linear-gradient(135deg,#fff4ec,#eef3ff); border-radius:var(--radius); border:1px solid #ffe1c6}
.hero h1{margin:0 0 8px; font-size:22px}
.hero p{margin:0; color:#5b6472; font-size:14px}

/* ---------- blocks ---------- */
.block{margin:16px auto; background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.block-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.block-head h1,.block-head h2{margin:0; font-size:18px}
.block .more{color:var(--blue); font-size:13px}
.block.empty p{margin:18px 0}

/* ---------- category chips ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.cat-chip{display:block; text-align:center; padding:14px 8px; border-radius:12px; background:#f7f8fa; border:1px solid var(--line); font-size:14px; font-weight:600}
.cat-chip:hover{border-color:var(--brand); color:var(--brand); background:#fff6ef}

/* ---------- resource grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.grid-sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.card{display:block; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .12s, box-shadow .12s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#ffd9bd}
.thumb{position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; color:#fff; background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.thumb .ext{position:absolute; right:8px; bottom:8px; font-size:10px; background:rgba(0,0,0,.45); padding:1px 6px; border-radius:6px; z-index:1}
.thumb.has-img{background:#eef0f4}
.thumb.has-img img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:10px}
.card-title{margin:0 0 8px; font-size:14px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.tag{background:#eef2ff; color:#4338ca; font-size:11px; padding:2px 8px; border-radius:6px}
.hot{background:#fff1f0; color:#e11d48; font-size:11px; padding:2px 8px; border-radius:6px}
.size{color:var(--muted); font-size:11px}

/* ---------- detail ---------- */
.detail h1{font-size:22px; margin:8px 0 12px}
.crumb{color:var(--muted); font-size:13px; margin-bottom:6px}
.meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.meta-item{color:var(--muted); font-size:13px}
.desc{color:#4b5563; background:#fafbfc; border-radius:10px; padding:12px 14px; font-size:14px}
.intro{margin:14px 0; padding:16px 18px; border:1px solid #e5e7eb; border-left:4px solid var(--brand); border-radius:10px; background:#fbfcfd}
.intro h2{margin:0 0 10px; font-size:17px}
.intro-body{color:#374151; font-size:14px; line-height:1.9; white-space:pre-line}

/* ---------- 简介 结构化 卡片 ---------- */
.intro-card{border-left:4px solid var(--brand); background:linear-gradient(180deg,#fff8f2 0%,#fff 60%)}
.intro-lead{margin:0 0 14px; color:#374151; font-size:14px; line-height:1.9}
.intro-sec{margin:0 0 14px}
.intro-sec:last-child{margin-bottom:0}
.intro-sec-title{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:10px}
.intro-sec-title .st-ico{font-size:16px; line-height:1}
.intro-points{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.intro-points li{position:relative; padding-left:26px; font-size:14px; color:#4b5563; line-height:1.7}
.intro-points .pt-ico{position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:#e7f6ec; color:var(--ok); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center}
.intro-save{background:#f4f9ff; border:1px solid #dbeafe; border-radius:12px; padding:14px}
.intro-save .intro-sec-title{margin-bottom:8px}
.intro-save-text{margin:0 0 12px; color:#4b5563; font-size:14px; line-height:1.8}
.intro-cta{display:flex; gap:10px; flex-wrap:wrap}
.intro-cta .btn{flex:1 1 auto; min-width:150px}
.intro-note{margin:0; padding:10px 12px; background:#fffbeb; border:1px solid #fde9c8; border-radius:10px; color:#92400e; font-size:13px; line-height:1.7}

/* ---------- detail 双栏布局 ---------- */
.detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start}
.detail-main{display:flex; flex-direction:column; gap:14px; min-width:0}
.detail-main > .block{margin:0}
.detail-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:120px}

/* 封面预览 */
.cover-main{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000}
.cover-main img{width:100%; display:block}
.cover-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.cover-thumbs img{width:84px; aspect-ratio:16/10; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer; flex:0 0 auto}
.cover-thumbs img.on{border-color:var(--brand)}

/* 资源信息表 */
.info-table{width:100%; border-collapse:collapse; font-size:14px}
.info-table td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.info-table tr:last-child td{border-bottom:0}
.info-table td:first-child{color:var(--muted); width:88px; white-space:nowrap}

/* 文件列表 */
.filelist pre{margin:0; white-space:pre-wrap; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:#374151; line-height:1.9; background:#fafbfc; border:1px solid var(--line); border-radius:10px; padding:12px 14px; max-height:320px; overflow:auto}

/* ---------- download box ---------- */
.download-box{margin:18px 0; padding:18px; border:2px dashed var(--brand); border-radius:var(--radius); background:#fff8f2}
.download-box h2{margin:0 0 14px; font-size:18px}
.link-row{display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:center; margin-bottom:10px}
.link-row label{font-size:13px; color:var(--muted)}
.link-row input{width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; color:#111}
.link-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.hint{color:var(--muted); font-size:13px; margin-top:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:#374151; border-radius:10px; padding:9px 16px; font-size:14px; cursor:pointer; font-weight:600; text-align:center}
.btn:hover{border-color:var(--brand); color:var(--brand)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand2); color:#fff}
.btn.big{padding:13px 26px; font-size:16px}
.btn.copy{padding:9px 14px; white-space:nowrap}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin:18px 0}
.step-col{border:1px solid var(--line); border-radius:12px; padding:14px; background:#fafbfc}
.step-col.on{border-color:var(--brand); background:#fff8f2}
.step-col h3{margin:0 0 10px; font-size:15px}
.step-col ol{margin:0; padding-left:18px; font-size:13px; color:#4b5563}
.step-col li{margin-bottom:6px}

/* ---------- promo ---------- */
.promo{margin:18px 0; padding:18px; border-radius:var(--radius); background:linear-gradient(135deg,#fff4ec,#fff); border:1px solid #ffe1c6}
.promo h3{margin:0 0 10px; font-size:16px}
.promo ul{margin:0 0 14px; padding-left:0; list-style:none}
.promo li{font-size:14px; margin-bottom:8px}

/* ---------- pagination ---------- */
.pagination{display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 6px; flex-wrap:wrap}
.pg{display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px}
.pg:hover{border-color:var(--brand); color:var(--brand)}
.pg-cur{font-size:14px; color:var(--muted)}
.empty-tip{color:var(--muted); text-align:center; padding:30px 0}

/* ---------- footer ---------- */
.site-footer{background:#fff; border-top:1px solid var(--line); margin-top:24px; padding:22px 0; color:var(--muted); font-size:13px}
.site-footer .wrap{display:flex; flex-direction:column; gap:6px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--brand)}

/* ---------- mobile ---------- */
@media (max-width:640px){
  body{font-size:14px}
  .header-inner{flex-wrap:wrap}
  .search{order:3; width:100%; max-width:none}
  .hero h1{font-size:19px}
  .steps{grid-template-columns:1fr}
  .link-row{grid-template-columns:1fr; gap:6px}
  .link-row label{margin-bottom:-2px}
  .detail-grid{grid-template-columns:1fr}
  .detail-side{order:-1; position:static}
  .cover-main img{width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .thumb{font-size:24px}
}