/* ============================================================
   lw_models.css — LensWave 首页新增区块样式（2026-10-26 新建）
   区块1：#lwModelsWrap 模型快速入口网格卡片
   区块2：#lwHotWrap    热门作品循环展示条（LibTV 风格 marquee）
   设计令牌对齐 public/css/lw_v2_vision.css（--lw2-*）：
     浅蓝灰基底 / 白卡 / 主蓝 #38BDF8 / 深字 #0F172A
   约束：本文件为纯新增，不改任何既有 css；类名前缀 lwModels* / lwHot*。
   ============================================================ */

/* ---------------- 区块1 · 模型快速入口 ---------------- */
#lwModelsWrap{
  max-width:1200px;
  margin:48px auto 0;
  padding:0 24px;
}
#lwModelsWrap .lwModels-head{ text-align:center; margin-bottom:28px; }
#lwModelsWrap .lwModels-head h2{
  font-size:34px; font-weight:800; letter-spacing:-.02em;
  color:#0F172A; margin:0;
}
#lwModelsWrap .lwModels-head p{
  font-size:15px; color:#64748B; margin:10px 0 0; line-height:1.7;
}
#lwModelsGrid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
@media(max-width:1080px){ #lwModelsGrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){  #lwModelsGrid{ grid-template-columns:repeat(2,1fr); } }

a.lwModels-card{
  display:block; text-decoration:none;
  background:#FFFFFF;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:18px 16px 16px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.lwModels-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,189,248,.45);
  box-shadow:0 10px 28px rgba(56,189,248,.14);
}
.lwModels-thumb{
  height:84px; border-radius:12px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:linear-gradient(135deg,#E0F2FE 0%,#EEF3FA 100%);
}
.lwModels-thumb svg{ width:34px; height:34px; opacity:.85; }
.lwModels-name{
  font-size:15px; font-weight:700; color:#0F172A; margin:0 0 6px;
  display:flex; align-items:center; gap:6px;
}
.lwModels-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.lwModels-badge{
  font-size:11px; font-weight:600; line-height:1;
  padding:4px 8px; border-radius:999px;
  background:rgba(56,189,248,.10); color:#0284C7;
}
.lwModels-badge.lwModels-badge--entry{
  background:rgba(15,23,42,.06); color:#475569;
}
.lwModels-flag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px;
  padding:2px 6px; border-radius:6px;
  background:linear-gradient(90deg,#4f6ef7,#22d3ee); color:#fff;
}

/* ---------------- 区块2 · 热门作品循环条 ---------------- */
#lwHotWrap{
  margin:56px 0 8px;
  padding:36px 0 8px;
  background:linear-gradient(180deg,#F6F9FC 0%,#EEF3FA 100%);
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
#lwHotWrap .lwHot-head{
  max-width:1200px; margin:0 auto 22px; padding:0 24px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
#lwHotWrap .lwHot-head h2{
  font-size:28px; font-weight:800; letter-spacing:-.02em; color:#0F172A; margin:0;
}
#lwHotWrap .lwHot-head p{ font-size:14px; color:#64748B; margin:6px 0 0; }
#lwHotWrap .lwHot-more{
  font-size:13px; font-weight:600; color:#0284C7; text-decoration:none; white-space:nowrap;
}
#lwHotWrap .lwHot-more:hover{ text-decoration:underline; }

#lwHotTrack{
  display:flex; gap:16px; width:max-content;
  animation:lwHotScroll 36s linear infinite;
  will-change:transform;
}
#lwHotMarquee:hover #lwHotTrack{ animation-play-state:paused; }
#lwHotMarquee{ overflow:hidden; }

.lwHot-frame{
  position:relative; flex:0 0 auto;
  width:300px; height:169px; /* 16:9 */
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:#0F172A;
}
.lwHot-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.lwHot-duration{
  position:absolute; right:8px; bottom:8px;
  font-size:11px; font-weight:600; color:#fff;
  background:rgba(0,0,0,.55); padding:2px 7px; border-radius:6px;
}
.lwHot-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.lwHot-play svg{ width:16px; height:16px; position:static; }

@keyframes lwHotScroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); } /* 轨道内容复制两份，-50% 无缝循环 */
}

@media (prefers-reduced-motion: reduce){
  #lwHotTrack{ animation:none; }
}