* { margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:#fdf3e3; color:#2b2118; min-height:100vh;
  position:relative; overflow-x:hidden;
}
body::before,body::after{
  content:""; position:fixed; border-radius:50%; filter:blur(80px);
  z-index:0; pointer-events:none; opacity:.55;
}
body::before{ width:520px;height:520px;background:#ffd9a8;top:-180px;right:-120px; }
body::after { width:460px;height:460px;background:#ffe9c7;bottom:-200px;left:-140px; }

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  box-shadow:0 2px 18px rgba(180,120,40,.08);
}
.bar{
  max-width:1640px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; gap:28px;
}
.logo{ display:flex; align-items:center; gap:10px; font-size:26px; font-weight:900; letter-spacing:1px; white-space:nowrap; }
.logo svg{ width:38px; height:38px; }
.search{ flex:1; max-width:620px; display:flex; align-items:center; gap:10px;
  background:#f4f4f6; border-radius:999px; padding:6px 8px 6px 20px; }
.search svg{ width:20px; height:20px; fill:#b6a99a; flex:none; }
.search input{ flex:1; border:0; outline:0; background:transparent; font-size:15px; color:#333; }
.search input::placeholder{ color:#b3a99c; }
.search button{
  border:0; cursor:pointer; color:#fff; font-size:15px; font-weight:700;
  padding:11px 26px; border-radius:999px;
  background:linear-gradient(135deg,#ff9d52,#ff6f3c);
  box-shadow:0 6px 14px rgba(255,120,50,.35); transition:transform .15s,box-shadow .15s;
}
.search button:hover{ transform:translateY(-1px); box-shadow:0 9px 18px rgba(255,120,50,.45); }
.count{ margin-left:auto; white-space:nowrap; font-size:14px; color:#8a7b68;
  background:#fff5e8; border:1px solid #f4ddbd; border-radius:999px; padding:8px 18px; font-weight:600; }
.count b{ color:#ff7a3d; font-size:16px; margin:0 2px; }

.tabs{ max-width:1640px; margin:18px auto 0; padding:0 32px; position:relative; z-index:1; }
.tab-row{ background:rgba(255,255,255,.75); border-radius:16px; padding:12px 18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  box-shadow:0 4px 16px rgba(180,120,40,.06); }
.chip{ border:0; cursor:pointer; font-size:15px; font-weight:600; color:#7d6f5f;
  background:transparent; padding:9px 22px; border-radius:999px; transition:all .15s; }
.chip.active{ color:#fff; background:linear-gradient(135deg,#ff9d52,#ff7a3d);
  box-shadow:0 5px 12px rgba(255,120,50,.35); }
.chip:not(.active):hover{ background:#fdeedd; }
.tab-tip{ margin-left:auto; font-size:13px; color:#a99b8a; }

main{ max-width:1640px; margin:0 auto; padding:26px 32px 60px; position:relative; z-index:1; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; }

.card{
  position:relative; border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 6px 18px rgba(140,90,30,.12);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(150,95,30,.24); }
.thumb{ position:relative; aspect-ratio:16/10; background:#e9e2d8; overflow:hidden; }
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.card:hover .thumb img{ transform:scale(1.06); }
.thumb .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ffc07a,#ff7e5f); color:#fff; }
.thumb .ph .emo{ font-size:52px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.15)); }
.name{ padding:12px 14px 8px; font-size:16px; font-weight:800; line-height:1.35; color:#3a2f24;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.acts{ padding:0 12px 14px; display:flex; gap:10px; margin-top:auto; }
.btn{ flex:1; text-align:center; text-decoration:none; font-size:14px; font-weight:700;
  padding:9px 0; border-radius:11px; transition:all .15s; }
.btn.ja{ color:#fff; background:linear-gradient(135deg,#ff9d52,#ff6f3c); }
.btn.ja:hover{ box-shadow:0 6px 14px rgba(255,120,50,.35); }
.btn.ke{ color:#fff; background:linear-gradient(135deg,#4facfe,#2f80ed); }
.btn.ke:hover{ box-shadow:0 6px 14px rgba(47,128,237,.32); }
.btn.off{ color:#b9ae9f; background:#f0ebe2; cursor:not-allowed; }

.empty{ text-align:center; padding:90px 0; color:#a99b8a; font-size:17px; display:none; }
.empty .big{ font-size:54px; display:block; margin-bottom:14px; }

@media (max-width:640px){
  .bar{ flex-wrap:wrap; padding:12px 16px; gap:12px; }
  .search{ order:3; max-width:none; flex-basis:100%; }
  .count{ margin-left:0; }
  .tabs,main{ padding-left:16px; padding-right:16px; }
}