*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;background:#f7f8fa;color:#1a1a1a}header{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:48px 24px 64px;text-align:center}header h1{font-size:32px;font-weight:600;margin-bottom:8px}header p{opacity:.85;font-size:14px}.container{max-width:1080px;margin:-32px auto 40px;padding:0 24px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}.card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 1px 3px #0000000f;transition:all .2s;cursor:pointer}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6366f126}.card .head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.card .icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#818cf8,#a78bfa);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700}.card h2{font-size:18px;font-weight:600}.card .desc{color:#555;font-size:14px;line-height:1.5;margin:8px 0 14px}.card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.card .tag{background:#eef2ff;color:#4f46e5;padding:3px 10px;border-radius:12px;font-size:12px}.card .meta{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #f0f0f0}.card .stars{color:#f59e0b;font-size:13px;font-weight:600}.card .star-btn{background:#4f46e5;color:#fff;border:none;padding:5px 14px;border-radius:6px;font-size:12px;cursor:pointer}.card .star-btn:hover{background:#4338ca}.card .star-btn:active{transform:scale(.96)}footer{text-align:center;padding:24px;color:#888;font-size:12px}