/* ============== 主题 ============== */
:root{
  --bg:#f6f7f9;
  --card:#fff;
  --ink:#1f2329;
  --sub:#8a9099;
  --line:#ececf0;
  --brand:#ff4d6a;
  --brand-soft:#fff0ec;
  --chip:#eef0f3;
  --chip-on:#ff4d6a;
  --green:#22c55e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
img{max-width:100%; display:block}

/* ============== 顶部条 ============== */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--brand); color:#fff;
  padding:14px 14px 12px;
  box-shadow:0 2px 10px rgba(255,77,106,.18);
}
.topbar h1{
  margin:0 0 10px; font-size:19px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.topbar h1 .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.25);
  display:inline-block;
}
.search-wrap{
  display:flex; gap:8px;
}
.search-wrap input{
  flex:1; min-width:0; height:40px; border:none; border-radius:22px;
  padding:0 16px; font-size:15px; background:#fff; color:var(--ink);
  outline:none; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.search-wrap input::placeholder{color:#b8bdc4}
.search-wrap input:focus{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
#searchBtn{
  flex:none; height:40px; padding:0 18px; border:none; border-radius:22px;
  background:#fff; color:var(--brand); font-size:14px; font-weight:600;
  cursor:pointer;
}

/* ============== 筛选区 ============== */
.filters{
  background:#fff;
  padding:8px 12px 6px;
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
  max-height:38vh; overflow-y:auto;
}
.filter-group{display:flex; align-items:flex-start; gap:8px}
.filter-group .lab{
  flex:none; font-size:12px; color:var(--sub);
  padding-top:5px; width:62px; line-height:1.3;
}
.filter-chips{
  display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0;
}
.chip{
  border:none; background:var(--chip); color:var(--ink); font-size:13px;
  padding:5px 12px; border-radius:14px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.chip.on{background:var(--chip-on); color:#fff; font-weight:500}
.chip.fav{background:#fff7d6; color:#c89e10}
.chip.fav.on{background:#f5b400; color:#fff}

/* ============== 列表区 ============== */
main{padding:10px 12px 60px}
.meta{color:var(--sub); font-size:12px; margin:4px 2px 10px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.card{
  position:relative;
  background:var(--card); border-radius:12px; overflow:hidden;
  color:inherit; display:block; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.card .cv{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--chip)}
.card .cv-fallback{
  width:100%; aspect-ratio:3/2;
  background:linear-gradient(135deg,#ffe2e8,#ffd1d9);
  display:flex; align-items:center; justify-content:center; color:var(--brand); font-size:28px;
}
.card .body{padding:8px 9px 10px}
.card .t{
  font-size:13px; font-weight:600; line-height:1.35;
  max-height:2.7em; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.card .info{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px; color:var(--sub); font-size:11px;
}
.card .au{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%;
  background:var(--brand-soft); color:var(--brand); padding:1px 6px; border-radius:8px;
  font-size:10px; font-weight:500;
}
.card .dg{color:#666; font-weight:500; flex:none}
.card .fav-btn{
  position:absolute; top:6px; right:6px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:#c8ccd1; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.card .fav-btn.on{color:#ff4d6a}
.card .fav-btn:active{transform:scale(.92)}
.tagline{margin-top:6px; display:flex; gap:4px; flex-wrap:wrap}
.tagline span{
  font-size:10px; color:var(--sub);
  background:#f1f2f5; border-radius:8px; padding:1px 6px;
}
.empty{text-align:center; color:var(--sub); margin-top:40px}

.top-btn{
  position:fixed; right:14px; bottom:18px; z-index:30;
  width:42px; height:42px; border-radius:50%; border:none;
  background:var(--brand); color:#fff; font-size:20px; font-weight:700;
  box-shadow:0 2px 10px rgba(255,77,106,.4); cursor:pointer;
}

/* ============== 桌面端 ============== */
@media(min-width:720px){
  .grid{grid-template-columns:repeat(4,1fr); max-width:1100px; margin:0 auto}
  .topbar h1{justify-content:center}
  .search-wrap{max-width:680px; margin:0 auto}
  main{max-width:1100px; margin:0 auto}
  .filters{max-width:1100px; margin:0 auto}
}