:root{--primary:#0d6efd;--bg:#f5f7fb;--text:#222;--muted:#777}body{background:var(--bg);font-family:Arial,sans-serif}.card-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px;padding:15px}.post-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,8%);transition:.3s;position:relative}.post-card:hover{transform:translateY(-5px)}.post-card img{width:100%;height:170px;object-fit:cover}.badge{position:absolute;top:10px;left:10px;background:#ff4757;color:#fff;padding:4px 10px;font-size:12px;border-radius:20px}.content{padding:12px}.title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px}.meta{font-size:13px;color:var(--muted);margin-bottom:10px}.actions{display:flex;justify-content:space-between;align-items:center}.btn{padding:6px 12px;border-radius:20px;font-size:13px;text-decoration:none}.read-btn{background:var(--primary);color:#fff}.share-btn{color:var(--primary);cursor:pointer}.filter-wrapper{display:flex;flex-wrap:wrap;gap:10px;padding:15px;align-items:center}.filter-box select{padding:10px 15px;border-radius:25px;border:1px solid #ddd;font-size:14px;background:#fff;cursor:pointer;transition:.3s}.filter-box select:hover{border-color:#0d6efd}.search-box{display:flex;align-items:center;background:#fff;border-radius:30px;border:1px solid #ddd;overflow:hidden;flex:1;max-width:400px}.search-box input{flex:1;padding:10px 15px;border:none;outline:none;font-size:14px}.search-box button{background:#0d6efd;color:#fff;border:none;padding:10px 18px;cursor:pointer;transition:.3s}.search-box button:hover{background:#0b5ed7}