@charset "UTF-8";
/* category.css —— 分类页：4 个分类按钮 + 资源卡片（手机 360×115，电脑两列铺满） */

.cat-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 18px}
.cat-switch-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border-radius:16px;
  border:1px solid var(--line);background:var(--glass);cursor:pointer;position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.cat-switch-btn:active{transform:scale(.94);filter:brightness(.94)}
.cat-switch-btn .cs-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.125rem;color:#fff;background:linear-gradient(135deg,var(--c1,#5b8cff),var(--c2,#a96bff))}
.cat-switch-btn.active{border-color:transparent;background:linear-gradient(135deg,var(--c1,#5b8cff),var(--c2,#a96bff))}
.cat-switch-btn.active .cs-icon{background:rgba(255,255,255,.22)}
.cat-switch-btn .cs-name{font-size:.75rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cat-switch-btn.active .cs-name{color:#fff}

.res-list{display:flex;flex-direction:column;gap:12px}
.res-card{
  position:relative;display:flex;align-items:center;gap:12px;
  width:360px;max-width:100%;height:115px;padding:12px 14px;border-radius:18px;
  background:var(--glass);border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.25);
  animation:fadeUp .4s both;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s;
}
.res-card::after{content:'';position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,var(--c1,#5b8cff),var(--c2,#a96bff));opacity:.16;pointer-events:none}
.res-card:active{transform:scale(.97);filter:brightness(.95)}
.res-card:hover{border-color:rgba(120,160,255,.55)}
.res-pic{flex:0 0 auto;width:78px;height:78px;border-radius:50%;overflow:hidden;position:relative;z-index:2;border:2px solid rgba(255,255,255,.28);background:var(--bg2)}
.res-pic img{width:100%;height:100%;object-fit:cover}
.res-pic .res-pic-icon{display:none;width:100%;height:100%;place-items:center;color:#fff;font-size:1.625rem;background:linear-gradient(135deg,var(--c1,#5b8cff),var(--c2,#a96bff))}
.res-main{flex:1;min-width:0;position:relative;z-index:2}
.res-name{font-size:.875rem;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.3}
.res-name .res-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:150px}
.res-tip{display:block;font-size:.6875rem;color:var(--muted);margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.res-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px;font-size:.625rem;color:var(--muted)}
.res-meta span{display:inline-flex;align-items:center;gap:3px}
.res-go{flex:0 0 auto;position:relative;z-index:2;color:var(--muted);font-size:.8125rem}
.res-card .res-lock{position:absolute;top:10px;right:12px;z-index:3;font-size:.625rem;font-weight:800;padding:2px 8px;border-radius:8px;color:#3a2400;background:linear-gradient(135deg,var(--vip1),var(--vip2))}
.res-empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:.8125rem}
.res-empty i{font-size:40px;display:block;margin-bottom:12px;opacity:.5}
.res-loading{padding:36px 20px;text-align:center;color:var(--muted);font-size:.75rem}
.cat-locked-tip{padding:34px 20px;text-align:center;color:var(--muted);font-size:.8125rem;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
.cat-locked-tip .lk-icon{font-size:44px;margin-bottom:14px;background:linear-gradient(135deg,var(--vip1),var(--vip2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cat-locked-tip h3{margin:0 0 8px;color:var(--text);font-size:1rem}
.cat-locked-tip p{margin:0 0 16px;font-size:.75rem}
.cat-locked-tip .lk-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (max-width:420px){
  .cat-switch{gap:8px}
  .cat-switch-btn{padding:10px 4px}
  .cat-switch-btn .cs-icon{width:38px;height:38px;font-size:1rem}
  .cat-switch-btn .cs-name{font-size:.6875rem}
  .res-card{height:112px;padding:10px 12px;gap:10px}
  .res-pic{width:70px;height:70px}
  .res-name{font-size:.8125rem}
  .res-name .res-title{max-width:118px}
}
/* ===== 电脑端：分类按钮变大、资源卡片两列铺满 ===== */
@media (min-width:1000px){
  .cat-switch{gap:16px;margin:10px 0 22px}
  .cat-switch-btn{padding:16px 10px}
  .cat-switch-btn .cs-icon{width:56px;height:56px;font-size:1.375rem}
  .cat-switch-btn .cs-name{font-size:.875rem}
  .res-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .res-card{width:100%;height:115px}
  .res-pic{width:82px;height:82px}
  .res-name .res-title{max-width:100%}
}
@media (min-width:1400px){
  .res-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}